`
enenxie
  • 浏览: 32937 次
社区版块
存档分类
最新评论

jquery validate扩展

jQuery.validator.addMethodjQuery自定义验证jQuery扩展验证jQuery addMethod 
阅读更多

一、封装自定义验证方法-validate-methods.js

/*****************************************************************
                  jQuery Validate扩展验证方法  (linjq)       
*****************************************************************/
$(function(){
    // 判断整数value是否等于0 
    jQuery.validator.addMethod("isIntEqZero", function(value, element) { 
         value=parseInt(value);      
         return this.optional(element) || value==0;       
    }, "整数必须为0"); 
      
    // 判断整数value是否大于0
    jQuery.validator.addMethod("isIntGtZero", function(value, element) { 
         value=parseInt(value);      
         return this.optional(element) || value>0;       
    }, "整数必须大于0"); 
      
    // 判断整数value是否大于或等于0
    jQuery.validator.addMethod("isIntGteZero", function(value, element) { 
         value=parseInt(value);      
         return this.optional(element) || value>=0;       
    }, "整数必须大于或等于0");   
    
    // 判断整数value是否不等于0 
    jQuery.validator.addMethod("isIntNEqZero", function(value, element) { 
         value=parseInt(value);      
         return this.optional(element) || value!=0;       
    }, "整数必须不等于0");  
    
    // 判断整数value是否小于0 
    jQuery.validator.addMethod("isIntLtZero", function(value, element) { 
         value=parseInt(value);      
         return this.optional(element) || value<0;       
    }, "整数必须小于0");  
    
    // 判断整数value是否小于或等于0 
    jQuery.validator.addMethod("isIntLteZero", function(value, element) { 
         value=parseInt(value);      
         return this.optional(element) || value<=0;       
    }, "整数必须小于或等于0");  
    
    // 判断浮点数value是否等于0 
    jQuery.validator.addMethod("isFloatEqZero", function(value, element) { 
         value=parseFloat(value);      
         return this.optional(element) || value==0;       
    }, "浮点数必须为0"); 
      
    // 判断浮点数value是否大于0
    jQuery.validator.addMethod("isFloatGtZero", function(value, element) { 
         value=parseFloat(value);      
         return this.optional(element) || value>0;       
    }, "浮点数必须大于0"); 
      
    // 判断浮点数value是否大于或等于0
    jQuery.validator.addMethod("isFloatGteZero", function(value, element) { 
         value=parseFloat(value);      
         return this.optional(element) || value>=0;       
    }, "浮点数必须大于或等于0");   
    
    // 判断浮点数value是否不等于0 
    jQuery.validator.addMethod("isFloatNEqZero", function(value, element) { 
         value=parseFloat(value);      
         return this.optional(element) || value!=0;       
    }, "浮点数必须不等于0");  
    
    // 判断浮点数value是否小于0 
    jQuery.validator.addMethod("isFloatLtZero", function(value, element) { 
         value=parseFloat(value);      
         return this.optional(element) || value<0;       
    }, "浮点数必须小于0");  
    
    // 判断浮点数value是否小于或等于0 
    jQuery.validator.addMethod("isFloatLteZero", function(value, element) { 
         value=parseFloat(value);      
         return this.optional(element) || value<=0;       
    }, "浮点数必须小于或等于0");  
    
    // 判断浮点型  
    jQuery.validator.addMethod("isFloat", function(value, element) {       
         return this.optional(element) || /^[-\+]?\d+(\.\d+)?$/.test(value);       
    }, "只能包含数字、小数点等字符"); 
     
    // 匹配integer
    jQuery.validator.addMethod("isInteger", function(value, element) {       
         return this.optional(element) || (/^[-\+]?\d+$/.test(value) && parseInt(value)>=0);       
    }, "匹配integer");  
     
    // 判断数值类型，包括整数和浮点数
    jQuery.validator.addMethod("isNumber", function(value, element) {       
         return this.optional(element) || /^[-\+]?\d+$/.test(value) || /^[-\+]?\d+(\.\d+)?$/.test(value);       
    }, "匹配数值类型，包括整数和浮点数");  
    
    // 只能输入[0-9]数字
    jQuery.validator.addMethod("isDigits", function(value, element) {       
         return this.optional(element) || /^\d+$/.test(value);       
    }, "只能输入0-9数字");  
    
    // 判断中文字符 
    jQuery.validator.addMethod("isChinese", function(value, element) {       
         return this.optional(element) || /^[\u0391-\uFFE5]+$/.test(value);       
    }, "只能包含中文字符。");   
 
    // 判断英文字符 
    jQuery.validator.addMethod("isEnglish", function(value, element) {       
         return this.optional(element) || /^[A-Za-z]+$/.test(value);       
    }, "只能包含英文字符。");   
 
     // 手机号码验证    
    jQuery.validator.addMethod("isMobile", function(value, element) {    
      var length = value.length;    
      return this.optional(element) || (length == 11 && /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/.test(value));    
    }, "请正确填写您的手机号码。");

    // 电话号码验证    
    jQuery.validator.addMethod("isPhone", function(value, element) {    
      var tel = /^(\d{3,4}-?)?\d{7,9}$/g;    
      return this.optional(element) || (tel.test(value));    
    }, "请正确填写您的电话号码。");

    // 联系电话(手机/电话皆可)验证   
    jQuery.validator.addMethod("isTel", function(value,element) {   
        var length = value.length;   
        var mobile = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;   
        var tel = /^(\d{3,4}-?)?\d{7,9}$/g;       
        return this.optional(element) || tel.test(value) || (length==11 && mobile.test(value));   
    }, "请正确填写您的联系方式"); 
 
     // 匹配qq      
    jQuery.validator.addMethod("isQq", function(value, element) {       
         return this.optional(element) || /^[1-9]\d{4,12}$/;       
    }, "匹配QQ");   
 
     // 邮政编码验证    
    jQuery.validator.addMethod("isZipCode", function(value, element) {    
      var zip = /^[0-9]{6}$/;    
      return this.optional(element) || (zip.test(value));    
    }, "请正确填写您的邮政编码。");  
    
    // 匹配密码，以字母开头，长度在6-12之间，只能包含字符、数字和下划线。      
    jQuery.validator.addMethod("isPwd", function(value, element) {       
         return this.optional(element) || /^[a-zA-Z]\\w{6,12}$/.test(value);       
    }, "以字母开头，长度在6-12之间，只能包含字符、数字和下划线。");  
    
    // 身份证号码验证
    jQuery.validator.addMethod("isIdCardNo", function(value, element) { 
      //var idCard = /^(\d{6})()?(\d{4})(\d{2})(\d{2})(\d{3})(\w)$/;   
      return this.optional(element) || isIdCardNo(value);    
    }, "请输入正确的身份证号码。"); 

    // IP地址验证   
    jQuery.validator.addMethod("ip", function(value, element) {    
      return this.optional(element) || /^(([1-9]|([1-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5])))\.)(([1-9]|([1-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5])))\.){2}([1-9]|([1-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5])))$/.test(value);    
    }, "请填写正确的IP地址。");
   
    // 字符验证，只能包含中文、英文、数字、下划线等字符。    
    jQuery.validator.addMethod("stringCheck", function(value, element) {       
         return this.optional(element) || /^[a-zA-Z0-9\u4e00-\u9fa5-_]+$/.test(value);       
    }, "只能包含中文、英文、数字、下划线等字符");   
   
    // 匹配english  
    jQuery.validator.addMethod("isEnglish", function(value, element) {       
         return this.optional(element) || /^[A-Za-z]+$/.test(value);       
    }, "匹配english");   
    
    // 匹配汉字  
    jQuery.validator.addMethod("isChinese", function(value, element) {       
         return this.optional(element) || /^[\u4e00-\u9fa5]+$/.test(value);       
    }, "匹配汉字");   
    
    // 匹配中文(包括汉字和字符) 
    jQuery.validator.addMethod("isChineseChar", function(value, element) {       
         return this.optional(element) || /^[\u0391-\uFFE5]+$/.test(value);       
    }, "匹配中文(包括汉字和字符) "); 
      
    // 判断是否为合法字符(a-zA-Z0-9-_)
    jQuery.validator.addMethod("isRightfulString", function(value, element) {       
         return this.optional(element) || /^[A-Za-z0-9_-]+$/.test(value);       
    }, "判断是否为合法字符(a-zA-Z0-9-_)");   
    
    // 判断是否包含中英文特殊字符，除英文"-_"字符外
    jQuery.validator.addMethod("isContainsSpecialChar", function(value, element) {  
         var reg = RegExp(/[(\ )(\`)(\~)(\!)(\@)(\#)(\$)(\%)(\^)(\&)(\*)(\()(\))(\+)(\=)(\|)(\{)(\})(\')(\:)(\;)(\')(',)(\[)(\])(\.)(\<)(\>)(\/)(\?)(\~)(\！)(\@)(\#)(\￥)(\%)(\…)(\&)(\*)(\（)(\）)(\—)(\+)(\|)(\{)(\})(\【)(\】)(\‘)(\；)(\：)(\”)(\“)(\’)(\。)(\，)(\、)(\？)]+/);   
         return this.optional(element) || !reg.test(value);       
    }, "含有中英文特殊字符");   
   

    //身份证号码的验证规则
    function isIdCardNo(num){ 
    　   //if (isNaN(num)) {alert("输入的不是数字！"); return false;} 
    　　 var len = num.length, re; 
    　　 if (len == 15) 
    　　 re = new RegExp(/^(\d{6})()?(\d{2})(\d{2})(\d{2})(\d{2})(\w)$/); 
    　　 else if (len == 18) 
    　　 re = new RegExp(/^(\d{6})()?(\d{4})(\d{2})(\d{2})(\d{3})(\w)$/); 
    　　 else {
            //alert("输入的数字位数不对。"); 
            return false;
        } 
    　　 var a = num.match(re); 
    　　 if (a != null) 
    　　 { 
    　　 if (len==15) 
    　　 { 
    　　 var D = new Date("19"+a[3]+"/"+a[4]+"/"+a[5]); 
    　　 var B = D.getYear()==a[3]&&(D.getMonth()+1)==a[4]&&D.getDate()==a[5]; 
    　　 } 
    　　 else 
    　　 { 
    　　 var D = new Date(a[3]+"/"+a[4]+"/"+a[5]); 
    　　 var B = D.getFullYear()==a[3]&&(D.getMonth()+1)==a[4]&&D.getDate()==a[5]; 
    　　 } 
    　　 if (!B) {
            //alert("输入的身份证号 "+ a[0] +" 里出生日期不对。"); 
            return false;
        } 
    　　 } 
    　　 if(!re.test(num)){
            //alert("身份证最后一位只能是数字和字母。");
            return false;
        }
    　　 return true; 
    } 

});

 

二、测试-validate-methods.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":"
            + request.getServerPort() + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <base href="<%=basePath%>">

        <title>jQuery Validate扩展验证方法</title>

        <meta http-equiv="pragma" content="no-cache">
        <meta http-equiv="cache-control" content="no-cache">
        <meta http-equiv="expires" content="0">
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="This is my page">
        <script type="text/javascript" src="<%=request.getContextPath()%>/validate/jquery-1.6.2.min.js"></script>
        <script type="text/javascript" src="<%=request.getContextPath()%>/validate/jquery.validate.min.js"></script>
        <script type="text/javascript" src="<%=request.getContextPath()%>/validate/jquery.metadata.min.js"></script>
        <script type="text/javascript" src="<%=request.getContextPath()%>/validate/validate-methods.js"></script>
        <script type="text/javascript" src="<%=request.getContextPath()%>/validate/messages_zh.js"></script>
        <script type="text/javascript">
        $(function(){
            var validate = $("#myform").validate({
                debug: true, //调试模式取消submit的默认提交功能    
                submitHandler: function(form){   //表单提交句柄,为一回调函数，带一个参数：form   
                    alert("提交表单");   
                    form.submit();   //提交表单   
                },   
                
                rules:{
                    zero:{
                        //isIntEqZero:true
                        //isFloat:true
                        //isInteger:true
                        //isNumber:true
                        //isMobile:true
                        //isPhone:true
                        //isTel:true
                        //isIdCardNo:true
                        //isRightfulString:true
                        isContainsSpecialChar:true
                    }                
                },
                //如果验证控件没有message，将调用默认的信息
                messages:{
                    zero:{
                        //isIntEqZero:"请输入0"
                        //isFloat:"请输入浮点数"
                        //isInteger:"请输入整数"
                    }
                                                     
                }
                          
            });    
        
        });
        </script>
    </head>

    <body>
        <form id="myform" method="post" action="">
            <p>
                <label for="zero">输入框：</label>
                <!-- id和name最好同时写上 -->
                <input id="zero" name="zero" />
            </p>
         
            <p>
                <input class="submit" type="submit" value="验证" />
            </p>
        </form>
    </body>
</html>

 转载：http://www.cnblogs.com/linjiqin/p/3433635.html

分享到：
| SpringMVC-Freemarker异常配置
评论
发表评论

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

相关推荐

    jquery validate例子

    《jQuery Validate插件详解与实例应用》 在Web开发中，表单验证是不可或缺的一环，它能够确保用户输入的数据符合预设的规则，提高数据的准确性和安全性。jQuery Validate是一个强大的JavaScript库，专为jQuery设计...

    jquery.validate 扩展身份证校验方法

    ### jQuery.validate 扩展身份证校验方法 在前端开发中，对用户输入的数据进行校验是非常重要的一步，它能够帮助开发者提高数据的准确性和安全性。本文将详细介绍如何使用`jQuery.validate`插件来扩展身份证号码的...

    jQuery Validate 1.1.2

    6. **插件扩展**：jQuery Validate 插件具有良好的可扩展性，可以通过编写自定义方法来扩展验证规则。 在jQuery Validate 1.1.2版本中，可能包含以下更新： - **修复已知bug**：此版本可能会修复了前一版本中报告...

    jquery validate 表单验证

    jQuery Validate插件是jQuery库的一个扩展，专门用于实现这样的功能。这个插件提供了一种简便的方式来对HTML表单进行验证，避免了服务器端不必要的负载。接下来，我们将深入探讨jQuery Validate的使用方法、核心概念...

    jquery validate依赖包及其帮助文档.rar

    《jQuery Validate插件详解与应用指南》 在Web开发领域，表单验证是不可或缺的一环，它能够确保用户输入的数据符合预设的规则，从而提高数据的准确性和系统的稳定性。jQuery Validate是一个强大的JavaScript库，专...

    jQueryValidate.rar

    总结来说，jQuery Validate是实现前端表单验证的高效解决方案，它具有丰富的验证规则、灵活的配置选项和强大的扩展能力。通过对它的深入理解和熟练运用，开发者可以创建出既美观又实用的表单，提升网站或应用的整体...

    jQuery validate 自定义样式、规则

    2. **JavaScript文件**：可能包含了自定义验证规则的实现，或者对jQuery Validate的配置和扩展。 3. **HTML模板**：可能展示了如何在实际表单中应用这些自定义样式和规则。 通过结合使用这些文件，你可以构建出符合...

    Jquery Validate修改版

    jQuery Validate插件是jQuery库的一个强大扩展，专用于表单验证。本文将深入探讨一个修改版的jQuery Validate，它改进了默认的提示方式，改为使用悬浮窗口显示，使得验证反馈更加直观和友好。 ### jQuery Validate...

    jquery validate 最稳定版本

    由于jQuery Validate插件的灵活性，可以轻松地扩展其功能，添加新的验证规则，或者修改现有的行为。 总结，jQuery Validate插件提供了强大的客户端表单验证功能，通过简单易懂的API，我们可以快速设置验证规则，...

    关于jquery validate plugin 指定需要验证对象解决方案

    《关于jQuery Validate Plugin指定需要验证对象的解决方案》 在Web开发中，表单验证是必不可少的一环，确保用户输入的数据符合预设的规则。jQuery Validate Plugin是一款强大的客户端表单验证插件，它使得这一过程...

    jQuery validate框架的个性化验证

    jQuery Validate 是一个强大的客户端验证插件，用于在用户提交表单前进行实时验证。这个框架大大简化了HTML表单的验证过程，提供了丰富的内置验证规则和可扩展的自定义验证功能，使得表单验证更加人性化和高效。 1....

    Jquery插件，JqueryUI,JqueryForm,JqueryValidate,Jqueryvsdoc

    在这个压缩包中，我们重点探讨的是几个基于 jQuery 的核心插件，它们分别是：jQuery UI、jQuery Form、jQuery Validate 和 jQuery vsdoc。 1. **jQuery UI** jQuery UI 是一个扩展了 jQuery 功能的开源库，提供了...

    jquery validate表单验证插件制作注册表单提交验证

    这可以通过扩展jQuery Validate插件或利用异步验证功能来实现。 总的来说，jQuery Validate是一个强大且易于使用的工具，它能够帮助我们构建功能完善的注册表单，确保用户输入的数据质量。通过理解其基本用法和规则...

    jquery.validate.js 1.8.1 + 实例

    `jQuery Validate` 插件1.8.1版本提供了丰富的功能，包括基本的验证规则、自定义验证规则以及错误消息定制。 ### jQuery Validate 插件基础 `jQuery Validate` 的核心功能是验证表单字段，它通过添加额外的属性到 ...

    jquery validate 自动绑定校验规则

    `jQuery Validate` 是一个流行的JavaScript库，用于在前端进行表单验证。这个库极大地简化了网页表单数据的验证过程，使得开发者可以方便地定义验证规则，并为用户提供实时的反馈。下面将详细介绍`jQuery Validate`...

    jquery validate验证示例

    在这个“jquery validate验证示例”压缩包中，很可能包含了 `jQuery Validate` 插件的核心文件以及一些示例代码，帮助开发者快速理解和使用这个插件。 首先，`jQuery Validate` 的核心功能包括： 1. **基本验证**...

    jquery.validate.1.8.1.rar

    《jQuery Validate 1.8.1：前端表单验证的利器》 在Web开发中，表单验证是一项不可或缺的功能，它能确保用户输入的数据符合预设的规则，从而提高用户体验并减少服务器端的压力。jQuery Validate插件是JavaScript库...

    Jquery validate表单验证Demo下载

    jQuery Validate插件是jQuery库的一个扩展，它提供了一种简单的方法来验证用户输入的数据，确保数据符合预定义的规则。这些规则可以包括检查用户名是否唯一，手机号码格式是否正确，密码强度是否足够，以及电子邮件...

    JQueryValidate验证说明

    `jQuery Validate`是一个基于JavaScript库`jQuery`的验证插件，用于高效地验证用户在表单中输入的数据。它提供了一系列预定义的验证规则，同时允许开发者自定义验证方法以满足特定需求。该框架对于创建具有国际化...

Magicbox
Global site tag (gtag.js) - Google Analytics