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表单验证大全》，欢迎大家学习阅读。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。