jquery.validate表单验证插件使用方法解析
为什么要用jqueryvalidate这个表单验证插件:自己写一个通用且功能全面强大的jquery表单验证插件并不容易。jqueryvalidate这个jquery插件几乎可以轻松应对95%以上的表单验证,具体内容如下
使用方式
1、在控件中使用默认验证规则,例子:
电子邮件(必填)
<inputid="email"class="requiredemail"value="email@"/>
2、可以在控件中自定义验证规则,例子:
自定义(必填,[3,5])
<inputid="complex"value="hi"class="{required:true,minlength:3,maxlength:5, messages:{required:'为什么不输入一点文字呢',minlength:'输入的太少了',maxlength:'输入那么多干嘛'}}"/>
3、通过javascript自定义验证规则,下面的JS自定义了两个规则,password和confirm_password
$().ready(function(){ $("#form2").validate({ rules:{ password:{ required:true, minlength:5 }, confirm_password:{ required:true, minlength:5, equalTo:"#password" } }, messages:{ password:{ required:"没有填写密码", minlength:jQuery.format("密码不能小于{0}个字符") }, confirm_password:{ required:"没有确认密码", minlength:"确认密码不能小于{0}个字符", equalTo:"两次输入密码不一致嘛" } } }); });
required除了设置为true/false之外,还可以使用表达式或者函数,比如
$("#form2").validate({ rules:{ funcvalidate:{ required:function(){return$("#password").val()!="";} } }, messages:{ funcvalidate:{ required:"有密码的情况下必填" } } });
Html
密码<inputid="password"name="password"type="password"/>
确认密码<inputid="confirm_password"name="confirm_password"type="password"/>
条件验证<inputid="funcvalidate"name="funcvalidate"value=""/>
4、使用meta自定义验证信息
首先用JS设置meta
$("#form3").validate({meta:"validate"});
Html
email<inputclass="{validate:{required:true,email:true, messages:{required:'输入email地址',email:'你输入的不是有效的邮件地址'}}}"/>
5、使用meta可以将验证规则写在自定义的标签内,比如validate
JS设置meta
$().ready(function(){ $.metadata.setType("attr","validate"); $("#form1").validate(); });
Html
Email
<inputid="email"name="email"validate="{required:true,email:true,messages:{required:'输入email地址',email:'你输入的不是有效的邮件地址'}}"/>
6、自定义验证规则
对于复杂的验证,可以通过jQuery.validator.addMethod添加自定义的验证规则
官网提供的additional-methods.js里包含一些常用的验证方式,比如lettersonly,ziprange,nowhitespace等
例子
//字符验证 jQuery.validator.addMethod("userName",function(value,element){ returnthis.optional(element)||/^[\u0391-\uFFE5\w]+$/.test(value); },"用户名只能包括中文字、英文字母、数字和下划线"); //然后就可以使用这个规则了 $("#form1").validate({ //验证规则 rules:{ userName:{ required:true, userName:true, rangelength:[5,10] } }, /*设置错误信息*/ messages:{ userName:{ required:"请填写用户名", rangelength:"用户名必须在5-10个字符之间" } }, });
7、radio、checkbox、select的验证方式类似
radio的验证
性别 <span> 男<inputtype="radio"id="gender_male"value="m"name="gender"class="{required:true}"/><br/> 女<inputtype="radio"id="gender_female"value="f"name="gender"/> </span>
checkbox的验证
最少选择两项
<span> 选项1<inputtype="checkbox"id="check_1"value="1"name="checkGroup" class="{required:true,minlength:2,messages:{required:'必须选择',minlength:'至少选择2项'}}"/><br/> 选项2<inputtype="checkbox"id="check_2"value="2"name="checkGroup"/><br/> 选项3<inputtype="checkbox"id="check_3"value="3"name="checkGroup"/><br/> </span>
select的验证
下拉框
<span> <selectid="selectbox"name="selectbox"class="{required:true}"> <optionvalue=""></option> <optionvalue="1">1</option> <optionvalue="2">2</option> <optionvalue="3">3</option> </select> </span>
8、Ajax验证
用remote可以进行Ajax验证
remote:{ url:"url",//url地址 type:"post",//发送方式 dataType:"json",//数据格式data:{//要传递的数据 username:function(){ return$("#username").val(); }} }
验证用户多种信息:
<scripttype="text/javascript"></script> //手机号码验证 jQuery.validator.addMethod("mobile",function(value,element){ varlength=value.length; varmobile=/^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/ returnthis.optional(element)||(length==11&&mobile.test(value)); },"手机号码格式错误"); //电话号码验证 jQuery.validator.addMethod("phone",function(value,element){ vartel=/^(0[0-9]{2,3}\-)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$/; returnthis.optional(element)||(tel.test(value)); },"电话号码格式错误"); //邮政编码验证 jQuery.validator.addMethod("zipCode",function(value,element){ vartel=/^[0-9]{6}$/; returnthis.optional(element)||(tel.test(value)); },"邮政编码格式错误"); //QQ号码验证 jQuery.validator.addMethod("qq",function(value,element){ vartel=/^[1-9]\d{4,9}$/; returnthis.optional(element)||(tel.test(value)); },"qq号码格式错误"); //IP地址验证 jQuery.validator.addMethod("ip",function(value,element){ varip=/^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/; returnthis.optional(element)||(ip.test(value)&&(RegExp.$1<256&&RegExp.$2<256&&RegExp.$3<256&&RegExp.$4<256)); },"Ip地址格式错误"); //字母和数字的验证 jQuery.validator.addMethod("chrnum",function(value,element){ varchrnum=/^([a-zA-Z0-9]+)$/; returnthis.optional(element)||(chrnum.test(value)); },"只能输入数字和字母(字符A-Z,a-z,0-9)"); //中文的验证 jQuery.validator.addMethod("chinese",function(value,element){ varchinese=/^[\u4e00-\u9fa5]+$/; returnthis.optional(element)||(chinese.test(value)); },"只能输入中文"); //下拉框验证 $.validator.addMethod("selectNone",function(value,element){ returnvalue=="请选择"; },"必须选择一项"); //字节长度验证 jQuery.validator.addMethod("byteRangeLength",function(value,element,param){ varlength=value.length; for(vari=0;i<value.length;i++){ if(value.charCodeAt(i)>127){ length++; } } returnthis.optional(element)||(length>=param[0]&&length<=param[1]); },$.validator.format("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)"));
参考学习:功能强大的jquery.validate表单验证插件
本文已被整理到了《jquery表单验证大全》,欢迎大家学习阅读。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。