Validation表单验证

liliugen

浏览: 546209 次
性别:
来自: 杭州

最近访客更多访客>>

林斌_LB

m635674608

lemon_gogogo

xvm03

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

AJAX

jQuery Ajax JavaScript json JSP

提供客户端验证有很多好处，最重要的好处，我觉得就是能够让用户及时的知道自己填写是否正确，这样是很友好的。软件界有这么一句话：错误发现的越早，损失就会越少……因而，对于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实现了服务器端远程验证。它内置有多种验证规则，同时，可以很方便的定义自己的规则。在此，说明一些常用的功能，详细的介绍，可以参考官方文档。[url]http://docs.jquery.com/Plugins/Validation [/url]

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();   
        }   
  
}

jQuery表单验证例子.rar (90.3 KB)
下载次数: 39

分享到：

学习笔记 | WebService之Axis2

2010-04-14 10:23
浏览 2871
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论