当前位置: 代码迷 >> Web前端 >> jQuery表单应验插件 Validation详解
  详细解决方案

jQuery表单应验插件 Validation详解

热度:252   发布时间:2012-08-28 12:37:01.0
jQuery表单验证插件 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>
  相关解决方案