最近在做一个用户注册登录的页面,资料查寻过程中发现了一个非常不错的客户端验证的极品-jQuery.validate。
它是著名的JavaScript包jQuery的一个插件,其实它还有其它的一些插件应该都爽,有待慢慢来学习

官方地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation/ 
jQuery用户手册:http://jquery.org.cn/visual/cn/index.xml

开发使用起来非常简单明了, 
我的代码:

  1. $(document).ready(function(){
  2. /* 设置默认属性 */
  3. $.validator.setDefaults({
  4. submitHandler: function(form) { form.submit(); }
  5. });
  6. // 中文字两个字节
  7. jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {
  8. var length = value.length;
  9. for(var i = 0; i < value.length; i++){
  10. if(value.charCodeAt(i) > 127){
  11. length++;
  12. }
  13. }
  14. return this.optional(element) || ( length >= param[0] && length <= param[1] );
  15. }, "请确保输入的值在3-15个字节之间(一个中文字算2个字节)");
  16. /* 追加自定义验证方法 */
  17. // 身份证号码验证
  18. jQuery.validator.addMethod("isIdCardNo", function(value, element) {
  19. return this.optional(element) || isIdCardNo(value);
  20. }, "请正确输入您的身份证号码");
  21. // 字符验证
  22. jQuery.validator.addMethod("userName", function(value, element) {
  23. return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);
  24. }, "用户名只能包括中文字、英文字母、数字和下划线");
  25. // 手机号码验证
  26. jQuery.validator.addMethod("isMobile", function(value, element) {
  27. var length = value.length;
  28. return this.optional(element) || (length == 11 && /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/.test(value));
  29. }, "请正确填写您的手机号码");
  30. // 电话号码验证
  31. jQuery.validator.addMethod("isPhone", function(value, element) {
  32. var tel = /^(\d{3,4}-?)?\d{7,9}$/g;
  33. return this.optional(element) || (tel.test(value));
  34. }, "请正确填写您的电话号码");
  35. // 邮政编码验证
  36. jQuery.validator.addMethod("isZipCode", function(value, element) {
  37. var tel = /^[0-9]{6}$/;
  38. return this.optional(element) || (tel.test(value));
  39. }, "请正确填写您的邮政编码");
  40. $(regFrom).validate({
  41. /* 设置验证规则 */
  42. rules: {
  43. userName: {
  44. required: true,
  45. userName: true,
  46. byteRangeLength: [3,15]
  47. },
  48. password: {
  49. required: true,
  50. minLength: 5
  51. },
  52. repassword: {
  53. required: true,
  54. minLength: 5,
  55. equalTo: "#password"
  56. },
  57. question: {
  58. required: true
  59. },
  60. answer: {
  61. required: true
  62. },
  63. realName: {
  64. required: true
  65. },
  66. cardNumber: {
  67. isIdCardNo: true
  68. },
  69. mobilePhone: {
  70. isMobile: true
  71. },
  72. phone: {
  73. isPhone: true
  74. },
  75. email: {
  76. required: true,
  77. email: true
  78. },
  79. zipCode: {
  80. isZipCode:true
  81. }
  82. },
  83. /* 设置错误信息 */
  84. messages: {
  85. userName: {
  86. required: "请填写用户名",
  87. byteRangeLength: "用户名必须在3-15个字符之间(一个中文字算2个字符)"
  88. },
  89. password: {
  90. required: "请填写密码",
  91. minlength: jQuery.format("输入{0}.")
  92. },
  93. repassword: {
  94. required: "请填写确认密码",
  95. equalTo: "两次密码输入不相同"
  96. },
  97. question: {
  98. required: "请填写您的密码提示问题"
  99. },
  100. answer: {
  101. required: "请填写您的密码提示答案"
  102. },
  103. realName: {
  104. required: "请填写您的真实姓名"
  105. },
  106. email: {
  107. required: "请输入一个Email地址",
  108. email: "请输入一个有效的Email地址"
  109. }
  110. },
  111. /* 错误信息的显示位置 */
  112. errorPlacement: function(error, element) {
  113. error.appendTo( element.parent() );
  114. },
  115. /* 验证通过时的处理 */
  116. success: function(label) {
  117. // set   as text for IE
  118. label.html(" ").addClass("checked");
  119. },
  120. /* 获得焦点时不验证 */
  121. focusInvalid: false,
  122. onkeyup: false
  123. });
  124. // 输入框获得焦点时,样式设置
  125. $('input').focus(function(){
  126. if($(this).is(":text") || $(this).is(":password"))
  127. $(this).addClass('focus');
  128. if ($(this).hasClass('have_tooltip')) {
  129. $(this).parent().parent().removeClass('field_normal').addClass('field_focus');
  130. }
  131. });
  132. // 输入框失去焦点时,样式设置
  133. $('input').blur(function() {
  134. $(this).removeClass('focus');
  135. if ($(this).hasClass('have_tooltip')) {
  136. $(this).parent().parent().removeClass('field_focus').addClass('field_normal');
  137. }
  138. });
  139. });

网上的资料有人说,它跟prototype包会有冲突,我还没有同时使用过,这点不是很清楚,但我是发现一个问题: 
对于最小/大长度的验证方法,作者可能考虑到大家的命名习惯不同,同时做了minLength和minlength(maxLength和maxlength)方法,应该哪一个都是可以的,但对于用户Message来说,只能够定义针对minlength(maxlength),才能调用用户自定义的Message, 
否则只是调用包的默认Message,但具体原因还没有查清楚。同时,这个插件提供了本地化的消息,但对于我这里初学者来说,怎么使用它还有待摸索!

客户端验证的极品--jQuery.validator的更多相关文章

  1. (转)[jQuery]使用jQuery.Validate进行客户端验证(初级篇)——不使用微软验证控件的理由

    以前在做项目的时候就有个很大心病,就是微软的验证控件,虽然微软的验证控件可以帮我们完成大部分的验证,验证也很可靠上手也很容易,但是我就是觉得不爽,主要理由有以下几点: 1.拖控件太麻烦,这个是微软控件 ...

  2. [jQuery]使用jQuery.Validate进行客户端验证(初级篇)

    以前在做项目的时候就有个很大心病,就是微软的验证控件,虽然微软的验证控件可以帮我们完成大部分的验证,验证也很可靠上手也很容易,但是我就是觉得不爽,主要理由有以下几点: 1.拖控件太麻烦,这个是微软控件 ...

  3. ASP.NET MVC的客户端验证:jQuery验证在Model验证中的实现

    在简单了解了Unobtrusive JavaScript形式的验证在jQuery中的编程方式之后,我们来介绍ASP.NET MVC是如何利用它实现客户端验证的.服务端验证最终实现在相应的ModelVa ...

  4. ASP.NET MVC的客户端验证:jQuery的验证

    之前我们一直讨论的Model验证仅限于服务端验证,即在Web服务器根据相应的规则对请求数据实施验证.如果我们能够在客户端(浏览器)对用户输入的数据先进行验证,这样会减少针对服务器请求的频率,从而缓解W ...

  5. jQuery.validator 验证规则详解

    前言:jQuery.validator是一款非常不错的表单验证插件,验证方式非常简单方便,它还对HTML5做了兼容处理,了解了验证规则,就基本掌握了它的使用,下面就让我一一道来 jQuery.vali ...

  6. jQuery 表单验证 jquery.validator.js

    前端开发中经常会碰到表单的制作,其中必备的功能就是提交前的一些简单的验证,非空啊.手机号码啊.E-mail等等等等,这里是一个 jQuery 的表单验证插件,蛮好用的,收录一下. 下面是验证的效果图: ...

  7. jquery.validator 手机号验证

    1.在input中加上mobile="true",maxlength="11" <label class="w170 control-label ...

  8. jq里验证插件的自定义方法Jquery.validator.addMethod()示例

    最近写验证的时候感觉原生的验证谢了一遍又一遍,就想到了“不要重复造轮子,学会管理自己的工具库”这句名言,于是尝试用jq的validator. 用过又发现需要自定义方法去验证,于是去查官网,写了Jque ...

  9. 自定义表单验证--jquery validator addMethod的使用

    原文地址:jquery validator addMethod 方法的使用作者:蜡笔小玄 jQuery.validate是一款非常不错的表单验证工具,简单易上手,而且能达到很好的体验效果,虽然说在项目 ...

随机推荐

  1. POJ 1080 Human Gene Functions -- 动态规划(最长公共子序列)

    题目地址:http://poj.org/problem?id=1080 Description It is well known that a human gene can be considered ...

  2. OpenJudge 2739 计算对数

    1.链接地址: http://bailian.openjudge.cn/practice/2739/ 2.题目: 总时间限制: 1000ms 内存限制: 65536kB 描述 给定两个正整数a和b.可 ...

  3. yii2 model常用验证规则

    //字段必填[['username'],'required','message'=>'{attribute}不能为空!'][['username','password'], 'required' ...

  4. PERL代码摘录

    1. 语法与数据结构 #嵌套哈希的赋值和取值 $HashTable{$key} = [@Array] #这个是赋值 @Array = @{ $HashTable{$key} } # 这个是取值 #Pe ...

  5. 细说PHP中strlen和mb_strlen的区别

    在PHP中,strlen与mb_strlen是求字符串长度的函数,但是对于一些初学者来说,如果不看手册,也许不太清楚其中的区别.下面通过例子,讲解这两者之间的区别. $str='中文a字1符'; ec ...

  6. linux点滴:rsync

    rsync(remote sync)是一款远程同步工具,可以实现全量备份.增量备份.本地备份.删除,核心功能是远程数据备份. 工作原理 rsync核心算法 1.分块checksum算法 首先,把文件平 ...

  7. 机器学习实战——k-近邻算法

    本章内容 ================================ (一)什么是k-近邻分类算法 (二)怎样从文件中解析和导入数据 (三)使用Matplotlib创建扩散图 (四)对数据进行归 ...

  8. WINIO64位模拟键鼠操作

    最近玩游戏有点入迷,心急升级经验,于是某天开始"挂尸体",一系列手动操作之后决定写一个外挂,模拟一系列键盘和鼠标操作,没做过游戏winform也用得少,开始以为只要简单调用winA ...

  9. 【原创】一起学C++ 之enum ---------C++ primer plus(第6版)

    枚举 定义:在默认情况下讲整数值赋给枚举量,第一个枚举量的值为0,第二个枚举量的值为1,依次+1 一.定义一个枚举,枚举类型,枚举量 *与C#相比个人认为C++的enum不好一点是不能通过枚举名点其中 ...

  10. MVC5 ModelBinder

    MVC5 ModelBinder 什么是ModelBinding ASP.NET MVC中,所有的请求最终都会到达某个Controller中的某个Action并由该Action负责具体的处理和响应.为 ...