2019独角兽企业重金招聘Python工程师标准>>>

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

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

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

Java代码
  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,但具体原因还没有查清楚。同时,这个插件提供了本地化的消息,但对于我这里初学者来说,怎么使用它还有待摸索!

转载于:https://my.oschina.net/wangyongqing/blog/59797

客户端验证的极品--jQuery.validator相关推荐

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

    2019独角兽企业重金招聘Python工程师标准>>> 引用源:http://www.cnblogs.com/kyo-yo/archive/2010/07/06/Use-jQuery ...

  2. [jQuery]使用jQuery.Validate进行客户端验证(高级篇-上)——不使用微软验证控件的理由...

    在上一篇使用jQuery.Validate进行客户端验证(中级篇-下)中我介绍了jQuery.Validate在日常使用的过程中会遇到哪些问题及解决办法,今天的高级篇则主要是对jQuery.Valid ...

  3. 客户端验证:JQuery Validation Plugin

    jQuery Validate验证框架详解 jQuery校验官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation 一.导 ...

  4. jQuery.validator.addClassRules()添加指定class的表单验证规则

    因为jQuery.validator 默认的是根据表单的name属性做验证,找了很久中文文档里没有提到制定class添加验证贵则的方式,官方文档终于找到了. 链接https://jqueryvalid ...

  5. jquery.validator验证后ajax提交出现错误解决

    今天使用jquery.validator验证后作ajax提交,总是不能成功:之后发现原来是页面中有报错没有解决.当把页面中的报错解决掉时,可以ajax提交了 <!DOCTYPE html> ...

  6. jquery. Validator验证框架ajax返回json数据

    今天在使用jquery. Validator验证框架的过程中遇到了一个这个的问题: 我需要动态的去验证注册邮箱是否已经存在了,所以需要用到ajax请求来解决该问题.但在使用该验证框架的ajax异步请求 ...

  7. 利用jQuery.validator来做表单验证,不要太轻松(全攻略)

    1.介绍 jQuery.validator是给我们用来做表单验证提交时的一个插件,你可以直接去官网下载,也可以通过菜鸟教程学习和下载该插件 菜鸟教程(jQuery.validator) 2.使用 2. ...

  8. ASP.NET MVC如何实现自定义验证(服务端验证+客户端验证)

    ASP.NET MVC通过Model验证帮助我们很容易的实现对数据的验证,在默认的情况下,基于ValidationAttribute的声明是验证被使用,我们只需要将相应的ValidationAttri ...

  9. jQuery验证控件jquery.validate.js使用说明+中文API

    官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载 ...

  10. html5 如何实现客户端验证上传文件的大小

    在HTML 5中,现在可以在客户端进行文件上传时的校验了,比如用户选择文件后,可以 马上校验文件的大小和属性等.本文章向码农介绍html5 如何实现客户端验证上传文件的大小,感兴趣的码农可以参考一下. ...

最新文章

  1. 什么是自组织特征映射网络?
  2. http://wenku.baidu.com/view/26afdb8371fe910ef12df8ccRevit采用DWG和FBX两种格式导入3D max方法的总结...
  3. ubuntu apt 相关命令
  4. php获取pid,在Shell脚本中获取指定进程的PID
  5. 怎么设置计算机管理员权限,Windows7管理员权限怎么设置?
  6. elk 安装与所遇问题
  7. mysql resultset null_com.mysql.jdbc.driver中resultset报NullException
  8. kali linux2019镜像下载,Kali 2019下载_KaLi Linux镜像文件iso下载 2019.1a x86/x64_当载软件站...
  9. thinkpadx1mdt 网络启动_二二、MDT 2013 Update 1批量部署-硬件驱动使用、驱动库建立及自动识别...
  10. excel 第12讲:vlookup函数和 macth与index函数
  11. html桂花酿网页,桂花酒的做法
  12. Sandy的卡片[SDOI2008]
  13. java文字水印换行_Java实现图片水印文字换行、平铺、旋转效果-Go语言中文社区...
  14. python单位转换编程_如何使用python编程将一组DNA序列转换为蛋白...
  15. QT Q_DISABLE_COPY 宏的用处
  16. eos安装区块链开发环境
  17. 项目文件夹下的obj文件夹
  18. 侯捷C++系统工程师
  19. 一步一步在平衡车上实现卡尔曼滤波
  20. dell r730服务器系统安装后,无法进入系统

热门文章

  1. 2020全国计算机专业考研学校
  2. 力扣-268 丢失的数字
  3. unordered_set/unordered_map 增删查操作
  4. Java学习之路 之 提问及解决篇
  5. git提交注释内容分行处理
  6. rk3399_android7.1调试串口uart功能和测试是否能通讯
  7. C#基础 数据类型 类型转换
  8. [序列化] SerializeHelper--序列化操作帮助类 (转载)
  9. H3C 路由过滤与路由引入
  10. 游戏开发之C++对C的扩展(C++基础)