开发者社区> 技术小胖子> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

简介:
+关注继续查看
最近由于公司决定使用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插件使用很简单:
$("#formId").validate(     
{     
                // 验证规则     
        rules:     
        {},     
        // 验证提示信息(失败时)     
                message:{},     
        errorElement: 'span',                                             // 放置错误信息的元素,可以是其他的。     
        errorPlacement: function(error,element)         // 将错误提示信息放在什么地方     
        {},     
                // 成功时执行     
        success: function(label)     
        {     
                label.text(" ")                                         // 将错误内容清空,一定要是" "有空格,否则IE有问题。     
                        .addClass("success");     
                     
        }     
});    
其中"formId"是表单的form元素的ID属性。 

rules和message分别都对应一个对象,该对象只包含属性,其中,属性名为表单中input的name(包括select的name),值为要应用的规则对象。如:
rules:{     
        userName:{     
                required:true,     
                maxlength:20,     
                emote: {     
                         url: "ajax/validateUserName.action",         //后台处理程序     
                         type: "post",                             //数据发送方式     
                         dataType: "json",                     //接受数据格式            
                                data: {                                         //要传递的数据,默认已传递应用此规则的表单项     
                                     email: function() {     
                                            return $("#email").val();     
                                }     
                }     
        }     
}    
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” 验证是否是合法后缀名的字符串
    remote: {
        url: "ajax/validateUserName.action",         //后台处理程序
        type: "post",                             //数据发送方式
        dataType: "json",                     //接受数据格式     
        data: {                                         //要传递的数据,默认已传递应用此规则的表单项
                email: function() {
                        return $("#email").val();
                }
        }
注意:remote是远程验证:比如注册验证用户名是否已被注册,返回值只能是true(验证成功)或false(验证失败)。 

除了内置的验证规则,validation还允许自定义验证规则。这是通过validation的addMethod方法实现的,语法 为:jQuery.validator.addMethod("name",function,message)。其中name为验证规则的名 称,function定义验证的规则,message是验证失败时的提示信息。如:
jQuery.validator.addMethod("ip"function(value, element) {     
        return this.optional(element) || (/^(\d+)\.(\d+)\.(\d+)\.(\d+)$/.test(value) && (RegExp.$1 < 256 && RegExp.$2 < 256 && RegExp.$3 < 256 && RegExp.$4 < 256));     
    }, "Please enter a valid ip address.");     
    // 增加只能是字母和数字的验证     
    jQuery.validator.addMethod("chrnum"function(value, element) {     
        return this.optional(element) || (/^([a-zA-Z0-9]+)$/.test(value));     
    }, "Please enter a valid format(charactors, A-Z, a-z, 0-9 only).");     
/**    
         * 自定义验证规则——对电话号码进行验证    
         */
    
        $.validator.addMethod(     
                "isPhone",        
                function(value, element)        
                {            
                        // “/\(?0\d{2,3}[) -]?\d{7,8}/”匹配电话号码的格式多种:010-82839278、(010)82839278、01082839278等,但是,这样有一个问题     
                        // 如:(01082839278这样的也会匹配。当然可以用分支条件"|"解决,比较麻烦。而且以什么开始或结束也没有匹配。     
                        // 为了简单起见,去掉有"()"的形式。匹配区号3位,则本地号8位,区号4位,则本地号7位的号码。     
                        var tel = /^0\d{2}[-]?\d{8}$|^0\d{3}[-]?\d{7}$/;     
                        return this.optional(element) || (tel.test(value));     
                }     
                , "电话号码格式不对."    
        );     

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

在此,提供一个有用的验证规则,那就是针对select下拉框的验证: 
/**    
         * 自定义验证规则——增加对select的验证    
         */
    
        $.validator.addMethod(        
                "selectNone",                             // name验证方法名     
                function(value, element)        // 验证规则     
                {     
                        if (value == "none")        // select默认值需要设置为"none"(当然可以自定义其他值)     
                        {        
                                return false;        
                        }        
                        else        
                        {     
                                return true;        
                        }     
                },        
                "必须选择一项"        // 默认验证消息(自定义规则信息的国际化是否不起作用?)     
        );     

二、验证信息的国际化 

验证信息国际化是很方便的,默认验证信息是英文的,只需导入validation已写好的国际化文件,如: 
<script type="text/javascript" src="scripts/jQuery/plugins/jquery.validate.js"></script>

<script type="text/javascript" src="scripts/jQuery/plugins/jquery.validate.messages_cn.js"></script>

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

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

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

三、远程验证 

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

remote规则的格式为: 
remote: {
        url: "ajax/validateUserName.action",         //后台处理程序
        type: "post",                             //数据发送方式
        dataType: "json",                     //接受数据格式     
        data: {                                         //要传递的数据,默认已传递应用此规则的表单项
                email: function() {
                        return $("#email").val();
                }

}
由于remote规则只允许后台返回true或false,因此struts2的action得不同于一般的action,不能返回一个字符串,然后 dispatch一个视图之类的。研究之后,发现struts2中有一种result类型:stream,通过该类型可以实现返回true或false。 action代码如下: 
view plaincopy to clipboardprint?
// 定义返回的输入流     
        private InputStream inputStream;     
             
        // 定义需要到远程验证的字段     
        private String userName;     
        private String email;            
             
        // 定义返回值:只能为Boolean类型     
        private Boolean valid;     
             
        /**    
         * Action执行的方法:实现远程验证,将业务逻辑交给后台处理,并接收结果    
         * 同时,将结果返回。    
         * @return    
         */
    
        public String execute()     
        {     
                // 根据userName判断该SP/CP是否已被注册;根据email判断该账号是否已被占用     
                if(spcpPreApprovalService.existSpcpAccount(userName, email))     
                {     
                        valid = false;     
                }     
                else    
                {     
                        valid = true;     
                }     
                     
                inputStream = new ByteArrayInputStream(valid.toString().getBytes());     
                     
                return Action.SUCCESS;     
        }     
        // 省略getter、setter    

struts.xml文件的配置为:
<package name="ajax" namespace="/ajax" extends="struts-default">
          <action name="validateSpId" class="validateSpcpAction">
            <result type="stream">
              <param name="contentType">text/html</param><!-- 默认为text/plain -->
              <param name="inputName">inputStream</param><!-- 默认就为inputStream -->
            </result>
          </action>
        </package>
这样便可以实现远程验证功能。 

总结 

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

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






     本文转自polaris1119 51CTO博客,原文链接:http://blog.51cto.com/polaris/258781,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
jquery插件制作 -- 6.手风琴Panel
  我们今天要做的是手风琴panel,jquery.ui里面有个叫做accordtion的插件,我们要实现的效果和他一样。   首先我们还是创建一个html文件,里面包含如下的html结构。        first pane     this script should allow only one pane to be visible at a time.
980 0
jquery插件制作 -- 5.提示框插件
  今天我们介绍的是提示框插件tooltip的制作,其中还会介绍到自定义选择器插件的开发。   我们首先来介绍自定义选择器的开发,他的代码结构如下: (function ($) { $.expr[':'].customselector = function (object,index,properties,list) { //code }; })(jQuery); 调用时候的写法: $(a:customselector)   现在我们先解释下函数中所使用到的各个参数。
773 0
35 个高级但使用简单的 jQuery 插件
Subway Map Visualization jQuery Plugin Download | Demo jquery-toastmessage-plugin Download | Demo Gmap Google Maps Plugin for jQuery Download | Demo Recurly.
896 0
10 新鲜的 jQuery 插件(2012年1月)
1. jQuery UI Bootstrap 一个基于 Twitter  Bootstrap 的 jQuery UI 主题 2. jqGrid 这是非常棒的jQuery 表格插件,在线演示:here.
940 0
8款非常棒的响应式 jQuery 幻灯片插件推荐
  这篇文章收集了8款优秀的响应式 jQuery 幻灯片插件,它们能够非常容易的集成到 Web 项目中。响应式(Responsive)设计的目标是要让产品界面能够响应用户的行为,根据不同终端设备自动调整尺寸,带给用户良好的使用体验。
839 0
10个实用的jQuery交互/通信插件和教程
在网站或应用程序中添加交互或通信功能,可以为用户带来非常棒的使用体验。本文整理了10个非常实用的jQuery插件和教程,可以帮助你在网站或应用中整合交互或通信功能,如新闻预览、显示最近日志的小部件、友情链接侧边栏等。
1013 0
Jquery图片滚动插件—BxCarousel
Jquery图片滚动插件—BxCarousel BxCarousel是一个具有众多配置且易用的Jquery图片滚动插件,特征主要有: Ø  可以指定显示的元素数 Ø  可以指定每次滚动元素数 Ø  自动播放模式 Ø  前一张/后一张按钮控制图片流动   下面我看两个BxCarousel...
761 0
文章
问答
文章排行榜
最热
最新
相关电子书
更多
零基础CSS入门教程
立即下载
23-Vue.js在前端...1506518547.pdf
立即下载
低代码开发师(初级)实战教程
立即下载