jQuery.validator 验证规则详解
前言:jQuery.validator是一款非常不错的表单验证插件,验证方式非常简单方便,它还对HTML5做了兼容处理,了解了验证规则,就基本掌握了它的使用,下面就让我一一道来 jQuery.validator 验证规则
一、在元素的class属性中添加需要验证的规则,多个规则以空格隔开
<label>邮箱:</label> <input class="required email" type="text" name="email">
required: // 必填 email: // 邮箱地址 url: // url地址 date: // 日期 dateISO: // ISO格式的日期(2014/08/27 或 2014-08-27) number: // 数字(负数,正数,小数,整数) digits: // 正整数 creditcard: // 信用卡
二、将要验证的规则作为元素的属性
<label for="userName">用户名:</label> <input name="userName" id="userName" required remote="ajax requestUrl"> <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格式的日期(2014/08/27 或 2014-08-27) number: // 数字(负数,正数,小数,整数) digits: // 正整数 creditcard: // 信用卡 // 注意,在元素上将规则作为元素的属性,除了 required ,以上规则都需要赋值,如:<input type="text" id="email" name="email" email="true"> minlength: // 输入字符最小长度(中文算一个字符) maxlength: // 输入字符最大长度(中文算一个字符) rangelength: // 输入字符最小,最大长度(中文算一个字符) min: // 数值最小值 max: // 数值最大值 range: // 数值最小,最大值 equalTo: // 再次输入相同的值 remote: // 发送ajax请求验证(常用案例就是在注册时,验证用户名是否存在), // 注:请求返回的 response === true || response === 'true',才算验证通过,这需要后端的配合
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]">
同时还支持HTML5的type属性,如:
<input type="url" name="url" required> <input type="number" name="number" required> <input type="email" name="email" required>
注意:不支持 type="range" 的 input 控件,这是因为需要比较最大,最小值,而不只是简单的正则验证
三、使用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="">
四、在配置对象中,传递要验证的规则
<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 } });
五、自定义验证规则
使用 $.validator.addMethod( name, method, message ), 便可以添加自定义规则
如:我要自定义一条验证手机号码的规则:
$.validator.addMethod('mobile', function( value, element ){ // /^1\d{10}$/ 来自支付宝的正则 return this.optional( element ) || /^1\d{10}$/.test( value ); }, '请输入正确的手机号码');
六、其他( 处理频繁请求ajax的操作 )
情景1:关注与取消关注,这种需求需要处理连续 多个ajax请求的关系
我之前的处理是上一个ajax请求完毕了,才去响应用户的下一次单击操作,即再次发送ajax请求
情景2:jQuery.validator源码中的例子
如果验证规则是 remote ,发送ajax请求验证,由于插件在keyUp事件中会触发验证,那么当keyUp频繁的触发,ajax就会请求很多很多次啦,这就涉及到处理连续多个ajax请求的问题,
即:上一次ajax请求还没完成,紧接着又发送ajax请求,这样是不是有点凌乱呢,jQuery.validator是这样做的,将上一次未响应的ajax请求中断,这样只会在最后一次keyUp事件中发送ajax验证
比较:想想情景1的例子,第二种处理方式更好,因为情景1的处理,可能会在最后一次单击事件无响应,不会触发ajax请求,造成用户体验不好,这是因为在最后一次单击事件中,上一次ajax请求还未完成(响应)
PS:
jQuery.validator有四种为表单控件添加验证规则的方式,其内部实现是按 class, attribute, jQuery.fn.data, 配置对象依次叠加的,后面途径添加的规则会覆盖前面添加的规则;
如果有多个表单控件的name属性值相同(属性值包含''),除第一个表单控件会验证,后面name属性值相同的表单控件验证将会忽略;