前言: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="提交">
</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 validate 多种使用方式的更多相关文章

  1. jquery.validate 以alert方式显示错误方法

    $.validator.setDefaults({ submitHandler: function() { alert("submitted!");return false; } ...

  2. MVC4中 jquery validate 不用submit方式验证表单或单个元素

    正确引入MVC4 jquery验证的相关文件 <script src="/Scripts/jquery-1.4.4.js"></script> <sc ...

  3. jquery.validate的效验方式

    jQuery校验官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation 原文地址:http://www.cnblogs.c ...

  4. MVC中 jquery validate 不用submit方式验证表单或单个元素

    <script src="/Scripts/jquery-1.4.4.js"></script> <script src="/Scripts ...

  5. Jquery Validate 表单验证的多种方式

    ASP.NET MVC Jquery Validate 表单验证的多种方式 在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体 ...

  6. ASP.NET MVC Jquery Validate 表单验证的多种方式

    在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...

  7. [转]ASP.NET MVC Jquery Validate 表单验证的多种方式介绍

    在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...

  8. jQuery validate 根据 asp.net MVC的验证提取简单快捷的验证方式(jquery.validate.unobtrusive.js)

    最近在学习asp.netMVC,发现其中的验证方式书写方便快捷,应用简单,易学好懂. 验证方式基于jQuery的validate 验证方式,也可以说是对jQuery validate的验证方式的扩展, ...

  9. jquery.validate ajax方式验证

    在做网站的时候有一块需要用到jquery.validate插件 ajax方式的方式来验证原始密码是否正确,研究了研究加上博客园朋友的帮助,终于实现了.贴出代码 <script type=&quo ...

随机推荐

  1. Zero-Copy实现原理

    参考文章 Nio Is Real 'Zero-Copy'?:https://dongc.github.io/2015/12/09/717/ 参考文章:Linux I/O (二):A Process O ...

  2. 【调研】在总体为n的情况下,多少样本有代表性?

    见这里: http://www.raosoft.com/samplesize.html

  3. Java编程思想学习笔记——复用类

    前言 复用代码是Java众多引人注目的功能之一. 达到复用代码的方法有: 组合:新的类由现有类的对象所组成.(复用现有代码的功能,而非它的形式) 继承:按照现有类的类型组建新类.(不改变现有类的形式, ...

  4. Android学习之——单击ActionBar实现ListView返回顶部

    不知道大家在刷微博时,有没有遇到过,刷新太多,想返回顶部看之前的微博的情况.其实,单击顶部的ActionBar能返回顶部.而不用一直向下拉. 废话不多说,讲讲Android中怎么实现这一功能. 首先, ...

  5. koa2使用注意点总结

    post请求,ajax传入的参数获取的时候为ctx.request.body get请求,ajax传入参数获取的时候为ctx.request.query.参数名 koa-csrf可以设置什么请求的时候 ...

  6. sql产生随机数

    使用RAND(),结果是类似于这样的随机小数:0.615942003695649 SELECT FLOOR(RAND()*N) ---生成的数是这样的:12.0  SELECT CAST(FLOOR( ...

  7. CorelDRAW中如何再制对象详解

    再制对象指的是快捷地将对象按一定的方式复制为多个对象,此种复制是复制的复制,再制不仅可以节省复制的时间,再制间距还可以保证复制效果.本教程将详解如何在CorelDRAW软件中再制对象. CorelDR ...

  8. MVC多语言设置 实战简洁版

    此方式可以通过更改进行更改进程语言设定,支持从系统获取默认的区域设定,支持自定义,自定义的方式可以为cookie,可为资料库获取,session等方式. 具体怎么设定就看个人需要了. 第一步: 添加资 ...

  9. MTK 永不熄屏

    步骤一: 源码/frameworks/base/packages/SettingsProvider/res/values/defaults.xml 修改<integername=</int ...

  10. 禁用ViewPager左右两侧拉到边界的渐变颜色

    Android ViewPager在拖拽到左边和右边的时候,禁止显示黄色或者蓝色的渐变图片的解决方法 先说明哦,想看看院里的,从头开始看,否则,就拉到最下面啦.解决方案就在最下面. 修改前: 修改后: ...