`
刘逸君
  • 浏览: 38949 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

Validation 表单验证 插件 jQuery 验证 数字 日期

    博客分类:
  • js
 
阅读更多

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

validation插件使用很简单:
Javascript代码
$("#formId").validate(     
{     
        // 验证规则     
    rules:     
    {},     
    // 验证提示信息(失败时)     
        message:{},     
    errorElement: 'span',                       // 放置错误信息的元素,可以是其他的。     
    errorPlacement: function(error,element)     // 将错误提示信息放在什么地方     
    {},     
        // 成功时执行     
    success: function(label)     
    {     
        label.text(" ")                     // 将错误内容清空,一定要是" "有空格,否则IE有问题。     
            .addClass("success");     
             
    }     
});   

$("#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),值为要应用的规则对象。如:
Javascript代码
rules:{     
    userName:{     
        required:true,     
        maxlength:20,     
        emote: {     
             url: "ajax/validateUserName.action",     //后台处理程序     
             type: "post",               //数据发送方式     
             dataType: "json",           //接受数据格式        
                data: {                     //要传递的数据,默认已传递应用此规则的表单项     
                   email: function() {     
                      return $("#email").val();     
                }     
        }     
    }     
}   

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” 验证是否是合法后缀名的字符串
Javascript代码
remote: {  
url: "ajax/validateUserName.action",     //后台处理程序  
type: "post",               //数据发送方式  
dataType: "json",           //接受数据格式     
data: {                     //要传递的数据,默认已传递应用此规则的表单项  
      email: function() {  
          return $("#email").val();  
      }  
}

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是验证失败时的提示信息。如:

Javascript代码
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));     
        }     
        , "电话号码格式不对."    
    );    

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));  
        }  
        , "电话号码格式不对." ); 


分享到:
评论

相关推荐

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

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

    表单验证jquery插件

    jQuery Validation Engine 是一个功能强大的表单验证插件,以其简单易用和丰富的自定义选项而受到开发者的青睐。 ## 1. jQuery Validation Engine 插件简介 jQuery Validation Engine 是一款基于 jQuery 库的验证...

    jQuery Validation Engine ( jQuery 表单验证插件)

    1. **丰富的预设规则**:该插件内置了多种验证规则,如必填项、电子邮件格式、电话号码、日期等,满足了大多数常见的表单验证需求。 2. **自定义验证**:除了预设规则,Validation Engine还允许开发者创建自定义...

    jquery formValidation表单验证插件实例

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

    Java Web Jquery表单验证

    编写基于Jquery的表单验证插件 Java Web Jquery表单验证 jQuery是一个流行的JavaScript库,可用于在网页上进行各种操作,包括表单验证。 1、将基于Jquery的表单验证的调查问卷分为四个部分:FrontPage.html、write....

    表单验证JQ插件jquery-validation.js

    表单验证JQ插件jquery-validation.js

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

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

    jQuery+Validation表单验证

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

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

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

    Jquery前端表单验证插件formvalidation源码及示例

    **jQuery FormValidation插件**是前端开发中一个广泛使用的工具,专门用于实现高效且用户友好的表单验证。这个插件基于流行的JavaScript库jQuery构建,它简化了在Web应用程序中实施复杂的验证规则的过程。在标题提到...

    高质量的jQuery表单验证插件 A Jquery Inline Form Validation

    **jQuery 表单验证插件概述** 在网页开发中,表单验证是不可或缺的一部分,它确保用户输入的数据符合预设的规则,提高了用户体验并减少了服务器端的负担。`A Jquery Inline Form Validation` 是一个高质量的jQuery...

    jquery表单验证插件

    而"jquery表单验证插件"则是基于jQuery构建的一种工具,用于增强表单数据输入的验证功能,确保用户提交的数据符合预设的规则。这款插件极大地提高了用户体验,因为它可以在用户输入时即时反馈错误,而无需等待表单...

    jQuery Validation 1.19.1表单验证 2020年 最新完整版 官方网站下载

    jQuery Validation Plugin v1.19.1 表单验证插件 2020年官方最新版。包含中文语言包messages_zh.js及jquery.validate.js,在dist目录中。

    JQ validation表单验证

    JQuery Validation 插件是一款广泛使用的 JavaScript 库,它提供了强大的表单验证功能,与 jQuery 框架无缝集成。本文将深入探讨 JQ validation 的核心概念、使用方法以及如何在实际项目中应用。 首先,JQuery ...

    jQuery validation——Jquery表单验证插件

    通过这些示例,开发者可以更深入地了解如何利用jQuery Validation来创建功能强大的表单验证解决方案。 总的来说,jQuery Validation 1.6是一个功能强大且易用的工具,能够帮助开发者轻松实现表单验证,提升网站用户...

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

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

    jQuery表单验证插件Validation的应用

    **jQuery表单验证插件Validation的应用** jQuery Validation插件是一款非常强大的前端表单验证工具,它可以帮助开发者轻松地实现对用户输入数据的有效性检查,确保数据的准确性和完整性。这个插件是基于jQuery库...

    jQuery强大的基于Bootstrap表单验证插件formValidation

    formvalidation是一款功能非常强大的基于Bootstrap的jQuery表单验证插件。该jQuery表单验证插件内置了16种表单验证器,你也可以通过Bootstrap Validator's APIs写自己的表单验证器。

    jQuery表单验证插件

    **jQuery表单验证插件详解** 在Web开发中,表单验证是不可或缺的一部分,它确保用户输入的数据符合预设的规则,从而提高用户体验并减少服务器端的负担。jQuery,一个轻量级、高性能的JavaScript库,提供了丰富的API...

Global site tag (gtag.js) - Google Analytics