`

封装jQuery Validate扩展验证方法

validatejquery 
阅读更多

一、封装自定义验证方法-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>
复制代码

---------------------------------------------------------------------------------
Blog：http://www.cnblogs.com/linjiqin/
Hadoop交流群(250363249)、Java+Oracle交流群(158560018)

 

本文来源于：http://www.cnblogs.com/linjiqin/p/3433635.html

分享到：
| DataTable学习笔记---排序细则、列隐藏
评论
发表评论

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

相关推荐

    extend jquery validate myValidate 表单验证

    在你提供的标题“extend jQuery validate myValidate 表单验证”中，我们可以推测你可能在尝试扩展默认的jQuery Validate功能，创建一个名为"myValidate"的自定义验证方法。扩展jQuery Validate库是常见的需求，以便...

    validate验证

    "对remote方法进行封装增强"这部分，意味着在原生的`jQuery Validate`基础上，开发者可能进行了扩展，以增强远程验证功能。`remote`验证方法允许你将验证逻辑移到服务器端，通过Ajax请求来验证数据。这样做可以处理...

    jquery.validate分组验证代码

    jQuery Validate插件是用于前端表单验证的JavaScript库，它提供了丰富的验证规则和方便的API，使得开发者可以轻松地实现对用户输入的验证。在“jquery.validate分组验证代码”这个场景中，我们关注的是如何分步验证...

    jquery validation 多表单，多按钮，分组验证

    jQuery Validation插件支持多表单验证，只需为每个表单分别初始化验证方法。这样，每个表单的验证逻辑可以独立设置，互不影响。 ```javascript $("#form1").validate({ rules: { // 规则 }, messages: { // ...

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

    jQuery是一个广泛使用的JavaScript库，它简化了DOM操作，而jQuery Validate插件则是jQuery的一个扩展，专门用于实现复杂的表单验证功能。本教程将深入探讨如何使用jQuery Validate插件来制作一个用户注册表单，涵盖...

    jquery 表单验证（包括所有的验证）

    除了内置的验证规则，我们还可以根据需求创建自定义验证方法。例如，要验证输入的年龄在18到60之间，可以这样做： ```javascript $.validator.addMethod("ageRange", function(value, element) { var age = ...

    jquery验证框架学习

    4. **自定义规则**：可以扩展验证框架，添加自定义验证规则，以满足特定的业务需求。 5. **错误提示**：框架会自动处理错误消息的显示，你可以自定义错误元素的样式和位置。 6. **提交事件处理**：验证框架会在表单...

    jQuery插件集之(表单验证)各种input等验证+Demo

    高级的jQuery验证插件通常允许开发者扩展其功能，比如添加新的验证方法，或者修改默认行为。通过阅读插件的文档，了解其提供的API和事件，可以按需定制验证逻辑。 综上所述，jQuery插件在表单验证方面提供了强大的...

    jquery 表单验证大全并以弹出形式提示信息

    在实际项目中，为了代码复用和维护，可以将验证逻辑封装成独立的函数，如 `validateUsername()` 和 `validateEmail()`。同时，利用 jQuery 的 `.each()` 方法遍历多个相似的表单元素进行批量验证。 最后，别忘了在...

    jquery封装函数，前后端分离框架

    例如，可以封装一个`loadData`函数用于通过AJAX从服务器获取数据，或者一个`validateForm`函数用于验证表单输入的有效性。这样，这些功能在项目中的任何地方都可以轻松调用，避免了重复编写相同的代码。 2. **静态...

    jQuery插件库.pdf

    这通常涉及封装特定功能，通过扩展jQuery对象的方法来实现。自定义插件可以让开发者更好地控制代码，满足个性化需求，同时保持代码的模块化和可维护性。 总结： jQuery 插件库极大地丰富了前端开发工具，使得开发者...

    jquery实现简易验证插件封装

    ### jQuery实现简易验证插件封装知识点概述 #### 1. jQuery简介 jQuery是一个快速、小巧且功能丰富的JavaScript库，它封装了JavaScript常用的操作，简化了HTML文档遍历和事件处理、动画和Ajax交互等操作。通过...

    PHP验证解决方案wm-validate-5.x.zip

    - 如果`wm-validate-5.x`支持，你可以扩展已有规则或创建新的验证规则以适应特殊需求。 - 定义自己的验证规则类，实现特定的验证逻辑。 7. **错误处理与反馈** - 验证失败时，应返回具体的错误信息，便于调试和...

    jquery-1.12.4免费.zip

    jQuery拥有庞大的插件生态系统，如jQuery UI提供丰富的用户界面组件，而jQuery Validate则是用于表单验证的强大工具。这些插件进一步扩展了jQuery的功能，满足了不同项目的需求。 8. **兼容性** jQuery 1.12.4...

    Ajax 动态表单验证封装类附示例

    实际应用中，封装类可能还包括其他验证方法，如手机号码、身份证号、密码强度等，并且可以通过配置参数或扩展类来增加更多验证规则。 总之，Ajax动态表单验证封装类提高了用户交互体验，降低了用户因数据错误而反复...

    jquery Ajax表单输入检测验证一例

    在实际项目中，为了代码的可维护性和可扩展性，我们通常会将验证逻辑封装到独立的函数或模块中，例如： ```javascript function validateEmail(email) { // 邮箱验证正则表达式 var regex = /^[a-zA-Z0-9._%+-]+@...

    Jquery视频教程.zip

    2. jQuery插件：jQuery社区提供了众多插件，如jQuery UI（包含各种界面组件）和jQuery Validate（表单验证），扩展了jQuery的功能。 3. 数据操作：jQuery可以操作数据属性，如$(element).data('key', 'value')用于...

    jquery1.7中文参考手册

    7. **插件机制**：jQuery拥有强大的插件生态系统，如jQuery UI提供丰富的界面组件，而许多第三方插件如jQuery Validate用于表单验证，方便开发者扩展功能。 8. **版本差异**：jQuery 1.7相对于早期版本，可能包含了...

    jQuery经典例子大全

    jQuery拥有丰富的插件生态系统，如`jQuery UI`提供了丰富的用户界面组件，`Bootstrap`框架整合了jQuery和CSS样式，`jQuery Validate`用于表单验证。这些插件扩展了jQuery的功能，使得开发更为便捷。 8. **特效...

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