jquery.form 异步校验_异步提交form的时候利用jQuery validate实现表单验证
异步提交form的时候利用jQuery validate实现表单验证相信很多人都用过jquery validate插件，非常好用，并且可以通过下面的语句来自定义验证规则
// 电话号码验证
jQuery.validator.addMethod("isPhone", function(value, element) {
var tel = /^(\d{3,4}-?)?\d{7,9}(-?\d{1,4})?$/;
return this.optional(element) || (tel.test(value));
}, "请正确填写您的电话号码");
验证通过，表单提交。但我们常常会碰到这样的需求，当验证通过后，我不需要通过submit form的方式提交表单，我想要更灵活的通过ajax处理表单，加入很多动态的效果，提高客户体验，请看下面的例子：
有一个表单：
姓名：
电话：
以下是JS：
function doSubmit() {
validateForm();//调用验证方法
//do something else...
}
function validateForm() {
var validator = $("#formId").validate({
errorElement: "em",
success: function(em) {
em.text("ok").addClass("success");//验证通过的动态CSS
},
submitHandler:function() {
ajaxSubmitForm();
},//这是关键的语句，配置这个参数后表单不会自动提交，验证通过之后会去调用的方法
rules: {
name: {
required: true,
maxlength: 100
},
phone: {
isPhone: true
}
},
messages: {
name: {
required: "请填写姓名",
maxlength: "姓名不超过100个字符"
}
}
});
}
function ajaxSubmitForm() {
var para = ;//组织参数
var url = "/jajax/saveForm.do";
$.ajax({
type: "post",
cache: false,
dataType: "json",
url: url,
data: para,
beforeSend: function(XMLHttpRequest){
//do something before submit...
},
success: function(data, textStatus){
//do something after submited...
},
complete: function(XMLHttpRequest, textStatus){
//do something in the end...
}
});
}
这样就非常灵活的完成了表单的验证和提交，其中很多时间节点都由我们自由的控制，加入任意你想做的事，是不是很方便呢...