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.
urlurl地址格式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.

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值