jQuery.validator验证规则详解
1.在元素的class属性中添加需要验证的规则,多个规则以空格隔开
<label>邮箱:</label>
<input class="required email" type="text" name="email">
required: //必填
email: //邮箱地址
url: //url地址
date: //日期
dateISO: //ISO格式的日期
number: //数字
digits: //正整数
creditcard: //信用卡
2.将要验证的规则作为元素的属性
<label for="userName">用户名:</label>
<input name="userName" id="userName" required remote="ajax requiredUrl">
<label for="password1">密码:</label>
<input type="password" name="password1" id="password1" required rangelength="6,12">
<label for="password2">请再次输入密码:</label>
<input type="password" name="password2" id="password2" required equalTo="#password1">
required: //必填
email: //邮箱地址
url: //url地址
date: //日期
dateISO: //ISO格式的日期
number: //数字
digits: //正整数
creditcard: //信用卡
minlength: //输入字符最小长度
maxlength: //输入字符最大长度
rangelength: //输入字符最小,最大长度
min: //数值最小值
max: //数值最大值
range: //数值最小,最大值
equalTo: //再次输入相同的值
remote: //发送ajax请求验证
jQuery.validator 内部做了很多处理,下面写法都是可以的
<input type="password" name="password1" id="password1" required rangelength="6,12">
<input type="password" name="password1" id="password1" required="" rangelength="6,12">
<input type="password" name="password1" id="password1" required rangelength="6,12">
<input type="password" name="password1" id="password1" required="true" rangelength="6,12">
同时还支持H5的type属性,如:
<input type="url" name="url" required>
<input type="number" name="number" required>
<input type="email" name="email" required>
3.使用jQuery.fn.data设置验证规则
<input type="text" name="userName">
$('[name="userName"]').data({
'ruleRequired':true,
'ruleRangelength':[4,10],
'ruleRemote':'ajax requestUrl'
});
//注意:下面写法是不会生效的,因为元素属性都是小写字母,大写字母都会转成小写
<input type="text" name="userName" data-ruleRequired="true" data-ruleRangelength="4,10" data-ruleRemote="">
4.在配置对象中,传递要验证的规则
<form id="validForm">
<input type="text" name="userName">
<input type="text" name="email">
<input type="submit" value="提交">
</form>
$('#validForm').validate({
//每一个name值对应一个验证规则
userName:{
required:true;
rangelength:[4,10],
remote:'' //ajax请求地址
},
email:{
required:true;
email:true;
}
});
5.自定义验证规则:
使用 $.validator.addMethod(name,method,message),便可以添加自定义规则
如:我们定义一条验证手机号码的规则:
$.validator.addMethod('mobile',function(value,element){
return this.optional(element)|| /^1\d(10)$/.test(value);
},'请输入正确的手机号码');