码迷，mamicode.com
首页 > Web开发 > 详细

jQuery学习之：Validation表单验证插件

时间：2014-12-22 15:50:11      阅读：194      评论：0      收藏：0      [点我收藏+]

标签：

最近由于公司决定使用AJAX + Struts2来重构项目，让我仔细研究一下这两个，然后集中给同事讲讲，让每个人都能够有所掌握，慢慢会用。于是，自己便开始学习…… 

由于Struts2自己早就学过，因而不需要花多少时间。而AJAX之前没怎么用过。现在AJAX框架如此之多，选择哪一个呢？开始打算选择dojo，但是看了一点后，发现蛮复杂的。在之前有学过一点点jQuery，而网上也说jQuery很强大而且很容易上手。对于我这种情况，正需要上手快的产品。于是，决定选择jQuery。网上jQuery相关的资料很多，如果想学习jQuery，我个人觉得《锋利的jQuery》蛮不错的，推荐看看。 

快速的学习完jQuery的基础知识后，便开始做Demo。这时发现一个问题：有些功能反复使用，能不能提取出来？既然我遇到了这样的问题，其他人肯定也遇到了。而jQuery的插件功能如此强大，肯定有相关好用成熟的插件可以使用。于是上网搜到了几个。这篇文章首先跟大家分享一下validation表单验证插件的使用心得。（注：有些来自于网上，在此无法列出作者，请见谅！） 

我们都知道，提供客户端验证有很多好处，最重要的好处，我觉得就是能够让用户及时的知道自己填写是否正确，这样是很友好的。软件界有这么一句话：错误发现的越早，损失就会越少……因而，对于WEB开发，表单验证是必不可少的。 

说到客户端验证，当然离不开javascript，然而，使用单纯使用javascript有不少问题：1、冗余的代码太多；2、要考虑浏览器的兼容问题；3、工作量大。这几个方面，笔者在项目中深有体会。之前，未进入公司工作时，总觉得公司编码会多么多么的规范，进去之后，发现根本不是这么回事。（当然，有些公司可能还是蛮规范的。）就拿我最近做的项目来说吧，我感觉代码实在是太差了，简直可以用惨不忍睹来形容。其中之一就是代码很不规范，完全就是为了实现功能，我有时跟同事开玩笑：这样的代码，只有自己能看懂吧……当然，不规范最严重的就是页面代码。一个jsp文件中，什么代码都有：java,jsp标签,struts标签，css，javascript等，总之能有的都有，不应该有的也有。其中最糟糕的是：同一个jsp文件中，javascript代码有写在外部js文件中的，有写在jsp文件的<head>中的，有写在<body>中的，还有写在文件最后的。我看了之后很无语。记得又一次，我看他们写的代码，在一个外部js文件中发现有一个变量根本没有定义赋值，很是奇怪，半天没弄明白。一问，他告诉我：在jsp文件的最后有定义那个全局变量……晕。当然，之所以出现这样的情况是多方面得原因，并非同事水平不行，他们一般水平都比我高。还有，现在的项目根本没法在其他浏览器访问，只能IE。正因为如此，我才建议应该重构。说了这么多，目的只有一个，那就是在应用中，我们应该考虑多方面，同时规范编码。同时，有些东西是重复的，为了提高工作效率，我们应该使用一些成熟的框架。下面就讲讲validation的相关知识。 

一、validate是jQuery的一个表单验证插件，它不仅实现了客户端表单的多种验证规则，而且，还是用ajax实现了服务器端远程验证。它内置有多种验证规则，同时，可以很方便的定义自己的规则。在此，说明一些常用的功能，详细的介绍，可以参考官方文档。http://docs.jquery.com/Plugins/Validation 

validation插件使用很简单： 

Javascript代码  技术分享
  1. $("#formId").validate(     
  2. {     
  3.         // 验证规则     
  4.     rules:     
  5.     {},     
  6.     // 验证提示信息（失败时）     
  7.         message:{},     
  8.     errorElement: ‘span‘,                       // 放置错误信息的元素，可以是其他的。     
  9.     errorPlacement: function(error,element)     // 将错误提示信息放在什么地方     
  10.     {},     
  11.         // 成功时执行     
  12.     success: function(label)     
  13.     {     
  14.         label.text(" ")                     // 将错误内容清空，一定要是" "有空格，否则IE有问题。     
  15.             .addClass("success");     
  16.              
  17.     }     
  18. });    


其中"formId"是表单的form元素的ID属性。 

rules和message分别都对应一个对象，该对象只包含属性，其中，属性名为表单中input的name（包括select的name)，值为要应用的规则对象。如： 

Javascript代码  技术分享
  1. rules:{     
  2.     userName:{     
  3.         required:true,     
  4.         maxlength:20,     
  5.         emote: {     
  6.              url: "ajax/validateUserName.action",     //后台处理程序     
  7.              type: "post",               //数据发送方式     
  8.              dataType: "json",           //接受数据格式        
  9.                 data: {                     //要传递的数据，默认已传递应用此规则的表单项     
  10.                    email: function() {     
  11.                       return $("#email").val();     
  12.                 }     
  13.         }     
  14.     }     
  15. }    



message对应是一样的，只是把规则的值改为提示信息，如：required:‘必填项‘。 

validation内置的验证规则如下： 

   required:true 必填 

  minlength:最小长度 

  maxlength:最大长度 

  rangelength: [3,10] 长度介于 3 和 {1} 之间的字符串 

  range:[100,1000] 只能是100和 1000 之间的值” 

  min:最小值 

  max:最大值 

  email:true 验证邮箱 

  url:true 验证是否是合法的网址 

  date:true 验证是否是合法的日期 new Date() 类型格式 

  dateISO:true 验证是否是合法的日期 年/月/日 或 年-月-日 格式 

  number:true 验证是否是合法的数字 

  digits:true 验证是否为整数 

  creditcard: 验证合法的信用卡号 

  equalTo:”要匹配的元素” 如:’#cnfpass’ , 验证两次输入值是否相同 

  accept: “gif|png|jpg” 验证是否是合法后缀名的字符串 

Javascript代码  技术分享
  1. remote: {  
  2.   url: "ajax/validateUserName.action",     //后台处理程序  
  3.   type: "post",               //数据发送方式  
  4.   dataType: "json",           //接受数据格式     
  5.   data: {                     //要传递的数据，默认已传递应用此规则的表单项  
  6.       email: function() {  
  7.           return $("#email").val();  
  8.       }  
  9.   }  


注意：remote是远程验证：比如注册验证用户名是否已被注册，返回值只能是true（验证成功）或false（验证失败）。 

除了内置的验证规则，validation还允许自定义验证规则。这是通过validation的addMethod方法实现的，语法为：jQuery.validator.addMethod("name",function,message)。其中name为验证规则的名称，function定义验证的规则，message是验证失败时的提示信息。如： 

Javascript代码  技术分享
  1. jQuery.validator.addMethod("ip", function(value, element) {     
  2.     return this.optional(element) || (/^(\d+)\.(\d+)\.(\d+)\.(\d+)$/.test(value) && (RegExp.$1 < 256 && RegExp.$2 < 256 && RegExp.$3 < 256 && RegExp.$4 < 256));     
  3.   }, "Please enter a valid ip address.");     
  4.   // 增加只能是字母和数字的验证     
  5.   jQuery.validator.addMethod("chrnum", function(value, element) {     
  6.     return this.optional(element) || (/^([a-zA-Z0-9]+)$/.test(value));     
  7.   }, "Please enter a valid format(charactors, A-Z, a-z, 0-9 only).");     
  8. /**   
  9.      * 自定义验证规则——对电话号码进行验证   
  10.      */    
  11.     $.validator.addMethod(     
  12.         "isPhone",      
  13.         function(value, element)      
  14.         {        
  15.             // “/\(?0\d{2,3}[) -]?\d{7,8}/”匹配电话号码的格式多种：010-82839278、(010)82839278、01082839278等，但是，这样有一个问题     
  16.             // 如：(01082839278这样的也会匹配。当然可以用分支条件"|"解决，比较麻烦。而且以什么开始或结束也没有匹配。     
  17.             // 为了简单起见，去掉有"()"的形式。匹配区号3位，则本地号8位，区号4位，则本地号7位的号码。     
  18.             var tel = /^0\d{2}[-]?\d{8}$|^0\d{3}[-]?\d{7}$/;     
  19.             return this.optional(element) || (tel.test(value));     
  20.         }     
  21.         , "电话号码格式不对."    
  22.     );     


还可以定义其他的验证规则。应用自定义的规则很容易，自定义规则和内置规则用法是一样的。 

在此，提供一个有用的验证规则，那就是针对select下拉框的验证： 

Javascript代码  技术分享
  1. /**   
  2.      * 自定义验证规则——增加对select的验证   
  3.      */    
  4.     $.validator.addMethod(      
  5.         "selectNone",               // name验证方法名     
  6.         function(value, element)    // 验证规则     
  7.         {     
  8.             if (value == "none")    // select默认值需要设置为"none"(当然可以自定义其他值）     
  9.             {      
  10.                 return false;      
  11.             }      
  12.             else      
  13.             {     
  14.                 return true;      
  15.             }     
  16.         },      
  17.         "必须选择一项"    // 默认验证消息（自定义规则信息的国际化是否不起作用？）     
  18.     );     



二、验证信息的国际化 

验证信息国际化是很方便的，默认验证信息是英文的，只需导入validation已写好的国际化文件，如： 

Javascript代码  技术分享
  1. <script type="text/javascript" src="scripts/jQuery/plugins/jquery.validate.js"></script>  
  2.   
  3. <script type="text/javascript" src="scripts/jQuery/plugins/jquery.validate.messages_cn.js"></script>  


在验证时，去掉message，提示信息就会变成中文。 

可以改国际化文件中的提示信息内容，使其更加个性化、符合项目要求。另外，如果在验证时使用了message，message中指定的字段提示信息会覆盖国际化文件中的信息。 

这里有一个问题，国际化时似乎没法根据浏览器的locale来自动识别该用什么语言来显示。笔者测试了一下，当导入多国语言文件时，总是会使用最后一次导入的语言。因此，要实现真正的国际化，可以通过一个链接之类的来选择语言，然后用javascript来导入不同的语言文件。 

三、远程验证 

远程验证很有用，用户体验很好，因为不需要提交表单就知道自己注册用户的是否已被注册。validation插件通过remote规则来实现验证。在此讲解一下如果将请求提交给struts2的action来验证。 

remote规则的格式为： 

Javascript代码  技术分享
  1.  remote: {  
  2.     url: "ajax/validateUserName.action",     //后台处理程序  
  3.     type: "post",               //数据发送方式  
  4.     dataType: "json",           //接受数据格式     
  5.     data: {                     //要传递的数据，默认已传递应用此规则的表单项  
  6.         email: function() {  
  7.             return $("#email").val();  
  8.         }  
  9.   
  10. }  


由于remote规则只允许后台返回true或false，因此struts2的action得不同于一般的action，不能返回一个字符串，然后dispatch一个视图之类的。研究之后，发现struts2中有一种result类型：stream，通过该类型可以实现返回true或false。action代码如下： 

Java代码  技术分享
  1. view plaincopy to clipboardprint?  
  2. // 定义返回的输入流     
  3.     private InputStream inputStream;     
  4.          
  5.     // 定义需要到远程验证的字段     
  6.     private String userName;     
  7.     private String email;        
  8.          
  9.     // 定义返回值：只能为Boolean类型     
  10.     private Boolean valid;     
  11.          
  12.     /**   
  13.      * Action执行的方法：实现远程验证，将业务逻辑交给后台处理，并接收结果   
  14.      * 同时，将结果返回。   
  15.      * @return   
  16.      */    
  17.     public String execute()     
  18.     {     
  19.         // 根据userName判断该SP/CP是否已被注册;根据email判断该账号是否已被占用     
  20.         if(spcpPreApprovalService.existSpcpAccount(userName, email))     
  21.         {     
  22.             valid = false;     
  23.         }     
  24.         else    
  25.         {     
  26.             valid = true;     
  27.         }     
  28.              
  29.         inputStream = new ByteArrayInputStream(valid.toString().getBytes());     
  30.              
  31.         return Action.SUCCESS;     
  32.     }     
  33.     // 省略getter、setter    



struts.xml文件的配置为： 

Xml代码  技术分享
  1. <package name="ajax" namespace="/ajax" extends="struts-default">  
  2.         <action name="validateSpId" class="validateSpcpAction">  
  3.             <result type="stream">  
  4.                 <param name="contentType">text/html</param><!-- 默认为text/plain -->  
  5.                 <param name="inputName">inputStream</param><!-- 默认就为inputStream -->  
  6.             </result>  
  7.         </action>  
  8.     </package>   



这样便可以实现远程验证功能。 

总结 

可以看出validation使表单验证变得很容易，实现起来很轻松。validation插件还有其他一些功能，需要了解可以查看官方文档。 

由于写的demo是把公司项目的一些页面改为ajax+struts2，所以在此不方便把所有的代买贴出来。如果遇到什么问题，可以联系我。 

jQuery学习之：Validation表单验证插件

标签：

原文地址：http://www.cnblogs.com/xiaochao12345/p/4178264.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！