jquery validate使用小结

今天做调查问卷的答题页面，需要做出一个功能，就是提交前检验用户是否全部答题，否则不允许提交。validate不仅可以用于对文本框进行验证，同样也可以对一些radio,checkbox进行验证，对这两个控件进行验证其实只是验证required就可以了。目前validate插件，我自己用的还不是很熟练，有的地方还没用明白，时间紧，没办法了。

（1）首先，在官网查了半天例子，发现其中都是点击submit控件才会进行验证，这点真是很不爽啊，换个button类型就没用了，更别提想加其他的逻辑了，后来发现，如果使用button，只要在js的代码中，写上$("#form1").valid()就可以了，该方法返回一个boolean值，用来说明验证是否成功。

（2）动态追加规则，页面的很多控件都是动态的，如果把规则写死，那就没法实现功能了。先总结一下基础的，validate是使用name来进行查找的，如<input type="radio" name="test" />,以test进行查询，当然如果控件名字都是一样的，也就是一组，validate会自动按组进行验证，比如有4个radio name都为test，验证规则是"test":"required"，那么只要radio有一个选中了，那么验证就会通过了。这点还是比较好用的。

接下来说一下，如何“动态”添加验证规则：

$(function(){
		$("#form1").validate({
			rules:{
				
			}
		});
		$("[name$='.sign']").each(function(){
			$(this).rules("add",{required:true,messages:{required:"至少选择一个选项"}});
		});
	});

像上面这样，页面加载完毕后，所有name以.sign结尾的控件都会被加上规则，其实最主要的语句就是那个each循环了，我在编码时候发现，如果不写$("#form1").validate(...)，也就是each循环上边那条语句的话，验证插件就会失效。这一点还是有点意外，另外jquery手串里也没有找到.rules这个api，有一些诧异。

（3）在添加代码后，测试效果还是可以的，但问题也来了，就是提示“至少选择一个选项”默认加到了radio和checkbox之后，而原来radio和checkbox后边文本内容也被往后挪了，这样实在是太不美观了，而且提示的内容什么样式都没有，只是黑色的，最起码也是红色的才好吧。。。

解决方法：

$(function(){
		$("#form1").validate({
			errorPlacement: function (error, element) {

				error.appendTo(element.parent("td"));
			},
			rules:{
				
			}
		});
		$("[name$='.sign']").each(function(){
			$(this).rules("add",{required:true,messages:{required:"至少选择一个选项"}});
		});
	});

添加一个errorPlacement的配置，指定添加错误信息的位置，error代表错误信息，也就是“至少选择一个选项”，element代表的是当前元素，好像就是radio和checkbox控件。至于提示信息的样式，如下：

validate会默认追加一个label，样式默认是error，所以我们做的就是写一个class为error的css就可以了

<style>
label.error 
{ 
color:Red; 
font-size:13px; 
margin-left:5px; 
padding-left:16px; 
} 
</style> 

这样效果就有了，红色的文本。最后上一张我的效果图。

最后的最后，把查到的validate资料粘上来。

如何使用
1、基本结构
     $("#reg").validate({
        onkeyup : true,
        rules : {
          password : {
                        required : true,
                        minlength : 5
             }
        },
        messages : {
          password : {
                        required : '密码必须输入',
                        minlength : '密码不能小于5位'
             }
        }
     });
    
   上面就是基本的校验结构，reg是需要校验的form的id，password是需要校验的字段的name
   (必须配置name，否则将不能校验)rules和messages是成对出现的，如果只配置了rules没有配置messages，
   系统将使用默认提示信息。
2、自定义校验规则
     $.validator.addMethod("hasreg", function(value) {
             return value != 'admin';
      }, '此用户已经被注册');
      //模拟用户名是否已经被注册，真实的场景应该是使用ajax向后台发送请求，然后后台返回结果，
      //需要注意的是必须使用同步请求，异步请求将无效。
   
   现在就已经有了一个新的rules “hasreg”，它的使用同系统内置的规则一样，在需要校验
   的字段里面配置hasreg:true，因为messages已经配置，故可以不写。
3、自定义信息展示
   框架默认的是在内容后面增加一个<label for="username" generated="true" class="error">请输入用
   户名</label>，同时在校验的元素上面增加class="error"属性，如果你想要一些效果，请编写error样式。
   如果这种提示方式不是你想要的，或者你不希望它来包装你的提示信息，你需要用到两个方法
   errorPlacement、showErrors鉴于这两个方法的复杂性和强自定义性，下面对他们做一个详细的说明。
   1)、errorPlacement
       错误信息展示，有两个参数error和element，error是生成的错误对象；element为当前元素。
       errorPlacement : function(error, element) { 
                  if(error){    //error存在的时候
                      $('#showMsg').html(error); //showMsg为你自定义的信息显示区域的id。
                  }
              }
    2)、showErrors
        它负责处理事件，当错误产生的时候它会将错误信息显示出来，错误消除时它负责将错误信息隐藏
        如果自定义了错误展示，而另外一部分还是默认的行为，则请调用this.defaultShowErrors()
        以便默认行为生效，它也有两个参数，分别是errorMap和errorList，是所有错误的集合。
        showErrors: function(errorMap, errorList) {
                  if(errorList && errorList.length > 0){  //如果存在错误信息
                      $.each(errorList,function(index,obj){ //遍历错误信息 ，index为错误信息的索引号，
                                                            //obj为当前错误信息对象
                          var msg = this.message;           //获取当前错误信息文本
                          //这里编写一些代码处理你的错误信息
                     });
                  }else{
                      //错误信息已经消除，此处要写隐藏错误信息的代码，
                      //通过this.currentElements获取当前对象
                  }
                  this.defaultShowErrors();  //如果还有默认的行为，请调用它。
              }
4、定制提交方式(ajax提交)
  如果使用ajax方式提交，那请采用如下两种方式和校验框架结合
  1)、使用submitHandler属性配置ajax提交，submithandler：当表单全部校验通过之后会回调配置的代码，此处也就是当校验通过之后
     调用ajax提交，详细代码请察看“ajax表单提交校验”示例代码。
  2)、使用valid方法，监听form的submit事件，当$('#form').valid()返回true的时候再提交。
      //通过监听form的submit事件，对form进行ajax提交。
         $('#formId').submit(function() {
             if (!$("#formId").valid()) 
                 return false;
             $(this).omAjaxSubmit({});
             return false; //此处必须返回false，阻止常规的form提交
         });
  
validate(options)
参数:
options - 标准config对象

本校验框架提供了丰富的校验规则，满足常用的校验需求。
   内置的校验规则有
 
 
 
rule名称
说明
默认提示
required
值必须输入
This
 field is required.
min
能输入的最小值
$.validator.format("Please enter a value greater than or equal to {0}.")
max
能输入的最大值
$.validator.format("Please enter a value less than or equal to {0}."),
minlength
必须输入minlength长度的字符
$.validator.format("Please
 enter at least {0} characters.")
maxlength
最多能输入maxlength长度的字符
$.validator.format("Please enter no more than {0} characters.")
email
邮件格式
Please enter a valid email address.
url
url地址格式
Please
 enter a valid URL.
date
日期格式
Please enter a valid date.
number
数字格式
Please enter a valid number.
rangelength
输入字符长度在某一个范围，有两个参数传入
$.validator.format("Please
 enter a value between {0} and {1} characters long.")
accept
可以接受的文件格式
Please enter a value with a valid extension.
equalTo
和已经有的属性做对比（适合重输密码）
Please enter the same value again.
range
输入的数值必须在某一个范围，传入两个参数
$.validator.format("Please
 enter a value between {0} and {1}.")
digits
必须输入数字
Please enter only digits.