首页 > 代码库 > jQuery.validator 验证规则详解

jQuery.validator 验证规则详解

2024-07-20 03:34:27   211人阅读

jQuery.validator 验证规则详解

转自：博客园 华子yjh

前言：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:      // 信用卡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="http://www.mamicode.com/提交"></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属性值相同的表单控件验证将会忽略；

jQuery.validator 验证规则详解


联系
我们