`

Validation表单验证

    博客分类:
  • AJAX
阅读更多
     提供客户端验证有很多好处,最重要的好处,我觉得就是能够让用户及时的知道自己填写是否正确,这样是很友好的。软件界有这么一句话:错误发现的越早,损失就会越少……因而,对于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();   
        }   
  
}  
分享到:
评论

相关推荐

    JQ validation表单验证

    **JQ validation 表单验证详解** 在网页开发中,用户输入的数据验证是必不可少的一环,它可以确保数据的准确性和一致性,防止恶意输入,提高用户体验。JQuery Validation 插件是一款广泛使用的 JavaScript 库,它...

    jQuery+Validation表单验证

    在使用jQuery+Validation表单验证时,通常需要以下步骤: 1. **引入依赖**:在HTML文件中,需要引入jQuery库和Validation插件的JS和CSS文件。 2. **初始化验证**:通过`$("form").validate()`启动验证器,并可以...

    jQuery Validation表单验证插件实例打包.rar

    jQuery Validation表单验证插件实例合集,是锋利的JQuery第七章中的一个典型实例,一步步向大家讲解如何使用基于jQuery的表单验证插件jquery.validate.js和jquery.validate.messages_cn.js的使用方法,一共包含了7个...

    jquery formValidation表单验证插件实例

    **jQuery FormValidation表单验证插件** jQuery FormValidation是一款高效且灵活的JavaScript库,专为开发者提供表单验证功能。这个插件使我们能够轻松地为网页中的表单添加验证规则,确保用户输入的数据符合预设的...

    validation-jQuery的validation表单验证插件.docx

    jQuery的validation表单验证插件是用于简化网页表单验证的工具,它基于jQuery库,提供了一种高效且可扩展的方式来验证用户输入的数据。这个插件使得开发者能够快速地实现常见输入验证,同时支持自定义验证规则和多...

    使用FormValidation进行表单验证

    `FormValidation`是一个强大的JavaScript库,它结合了`jQuery`和`Bootstrap`框架,使得表单验证变得更加简单易用。本文将详细介绍如何使用`FormValidation`进行表单验证,并探讨与`jQuery`和`Bootstrap`的集成。 ...

    基于Prototype的Validation表单验证插件.rar

    一款基于Prototype的Validation表单验证插件,实现Ajax风格的无刷新表单验证功能,当用户输入完表单,即时显示该项输入是否正确,不正确则会给出提示,适合那些比较喜欢简洁风格,又要求功能准确的用户,本款表单...

    JQurey Validation表单验证使用详解

    jQuery Validation 插件是用于前端表单验证的强大工具,它能够帮助开发者轻松地实现各种复杂的验证规则,确保用户提交的数据符合预设的标准。这个插件不仅提供了丰富的验证方法,还支持自定义规则和消息,使其具有...

    validation-jQuery的validation表单验证插件.pdf

    jQuery的validation插件是一款强大的表单验证工具,它基于JQuery库,使得开发者能够快速有效地实现对表单输入数据的验证。这个插件不仅提供了许多内置的验证规则,还允许自定义验证方法,同时支持多语言,极大地提高...

    jQuery Live Form Validation表单验证插件.zip

    jQuery Live Form Validation是一个用于创建表单验证的jQuery插件。支持自定义校验规则,既可以在输入的时候实时校验,也可以在提交的时候校验。提示信息的样式完全可以通过CSS定义。

    validation js表单验证

    "Validation JS"是一种流行的JavaScript库,专门用于客户端的表单验证。它允许开发者轻松地定义验证规则,并在用户提交表单前进行实时检查。 **1. 基本概念** - **JavaScript表单验证**:JavaScript是一种在浏览器...

    jQuery插件Validation表单验证详解

    本文为大家分享了jQuery插件Validation表单验证的具体实现代码,供大家参考,具体内容如下 功能 1.对”姓名“的必填和长度至少是两位的验证。 2.对“电子邮件”的必填和是否为E-mail格式的验证。 3.对“网址”是否...

    rapid-validation

    压缩包中的"rapid-validation表单验证"文件可能包含了这个库的源码、文档、示例以及相关的配置文件。通过阅读源码,开发者可以了解其实现原理和使用方法;文档则提供了详细的API参考和教程,帮助快速上手;示例代码...

    jQuery.validationEngine表单验证中文版

    **jQuery.validationEngine表单验证中文版** jQuery.validationEngine是一款强大的前端表单验证插件,它为开发者提供了便捷的方式来实现表单数据的验证。这个插件以其丰富的功能、友好的用户界面和灵活的自定义能力...

    jquery-validation 网页表单验证js

    综上所述,`jQuery-validation`是一个强大且灵活的表单验证工具,能够帮助开发者快速构建具有高质量用户体验的表单验证功能。它的核心在于其易于理解和使用的API,以及丰富的验证规则和自定义选项,使得开发者可以...

Global site tag (gtag.js) - Google Analytics