jQuery.ajaxSubmit异步提交表单并用jQuery.validate进行校验

写这篇呢

一是因为网上相关中文文章不多且有些细节没讲到，官方demo也没有说明文件，用起来还有些地方要注意；

二是因为异步无刷新请求的用户体验和耗费资源都比form表单的直接提交页面跳转要来得好得多；

三是一些场景不得不异步请求，但每次重复的手动校验和提示 工作量大且效果不统一，统一的校验拿到哪个项目都可以直接落地使用。

首先，到官网下载jQuery和jQuery.form ，jQuery.validate三个js库，引入到项目。

由于jQuery的原因，必须使用

标签将表单包裹起来，如果想支持任意标签网上也有大神重写了，如https://www.cnblogs.com/calvinK/p/5916294.html，这里我没去测试。

接下来附上demo代码，被我注释的部分不影响功能测试，如果要测试请引入相应的js，jQuery.validate下载下来是包含demo的，使用了jQuery.mockjax模拟异步请求，可直接打开在浏览器测试的。

	
	
	
	
	
	
	
	
	


jQuery Validation Plugin Demo

	

		

			
Login Form (Enter "foobar" as password)
			

				Username
				
			
			

				Password
				
			
			

				
			
		
	
	
Please login!
	

	Programmatically reset above form!
	Back to main page

这个demo里有几个要点

一，

标签包裹；

二，必须触发表单提交事件才能触发校验（直接调用jQuery.ajaxSubmit不触发校验，这个应该是jQuery.form和jQuery.validate之间还没去做调和）,当要异步提交表单时就不能用$("#formId").submit()提交了，此时应该用提交按钮来触发事件，当不需要该按钮时可以隐藏在其他需要的地方调用$("#submitButton).click()来触发表单提交，这样就能触发校验事件了；

三，jQuery("#form").validate(）需要在页面加载时调用以绑定校验事件，如果要自定义校验规则可以用

jQuery.validator.addMethod("phone", function(value, element) {
        var length = value.length;
        return this.optional(element) || ((length == 11 || length==13 || length==14) && /^((\+?86)|(\(\+86\)))?(13[012356789][0-9]{8}|15[012356789][0-9]{8}|18[02356789][0-9]{8}|147[0-9]{8}|1349[0-9]{7})$/.test(value))
        							  || ((length>=6&&length<=18) && /^(0[0-9]{2,3}\-?)?[2-9][0-9]{6,7}(\-?[0-9]{1,4})?$/);
    }, "电话号码格式错误!");

添加自定义的校验方法，这里value是传入的值，element是传入的对象，如果需要还可以再自己传入其他参数（请自行探索）

以下是完整的使用代码

	       jQuery("#form").validate({
		rules: {
//			user: "required",
//			password: "required",
			phone: {//左边的phone对应的是input的name属性,括号里的phone是自定义的校验规则方法ming
				required: true,
				phone: true
				}
		},
//		messages: {//这里可以自定义校验失败的提示信息
//			name: "Please enter your name",
//			password: "Please enter your password",
//			phone: "Please enter a valid phone"
//		},
		submitHandler: function(form) {//提交事件校验通过，下面是自己写的异步提交和返回结果处理（但不会提交）
			jQuery(form).ajaxSubmit(function(result){//result是返回的结果对象
				
			});
		}
	});

发现有篇文章讲得更全，我这篇主要是体现自己探索使用的，看来有些东西不要百度了（当时百度到的很少且不全），到CSDN网站上搜反而能找到要的东西。附上别人的链接链接http://blog.csdn.net/s445320/article/details/50748975