`

jQuery表单验证中自定义验证规则

jQueryvalidate 
阅读更多

封装自定义验证方法：

 

$(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; 
    } 


});




//车牌号校验
function isPlateNo(plateNo){
    var re = /^[\u4e00-\u9fa5]{1}[A-Z]{1}[A-Z_0-9]{5}$/;
    if(re.test(plateNo)){
        return true;
    }
    return false;

}

 

二、测试-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>

0
顶
0
踩
分享到：
| 解决 IDEA 中src下xml等资源文件无法读取 ...
评论
3 楼 逍遥绝情 2017-04-13  
厉害啊   
2 楼 逍遥绝情 2017-04-13  
大神啊、、、、   
1 楼 腾云驾雾兴风雨 2017-03-23  
我只是来试试
发表评论

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

相关推荐

    Jquery表单验证特效示例

    综上所述，"Jquery表单验证特效示例"涵盖了使用jQuery进行表单验证的基本原理、常见规则、自定义规则和视觉反馈。通过学习和实践这些示例，开发者能够创建出既有实用性又有吸引力的表单验证机制，从而提高网站或应用...

    jQuery表单验证大全

    《jQuery表单验证详解》 在Web开发中，表单验证是不可或缺的一部分，它能确保用户输入的数据符合预设的规则，从而保护服务器免受不合法数据的影响，提高用户体验。jQuery，作为一款广泛使用的JavaScript库，提供了...

    jquery表单验证插件

    在使用jQuery表单验证插件时，你需要在HTML中为表单元素添加特定的属性（如`data-rule`和`data-msg`），然后在JavaScript中初始化验证插件，通过调用相应的API方法来配置验证规则。例如： ```html ; minlen=5" ...

    jQuery表单验证

    jQuery表单验证是一种在网页开发中常用的技术，用于在用户提交数据前检查输入的有效性，确保数据的质量和安全性。在Web应用中，表单验证是不可或缺的部分，它可以帮助减少服务器端的压力，提供更好的用户体验，及时...

    jquery表单验证实例网站会员注册表单验证提交form表单代码

    jQuery生态系统中有许多优秀的表单验证插件，如jQuery Validation Plugin，它可以提供更丰富的验证规则和定制化选项。在大型项目中，使用这类插件可以简化代码并提高可维护性。 总的来说，jQuery为表单验证提供了...

    jquery validate 验证自定义样式

    在本文中，我们将深入探讨如何利用jQuery Validate来创建自定义验证样式。 首先，我们从标题"jquery validate 验证自定义样式"开始。jQuery Validate插件默认提供了一些基本的样式，但这些样式可能不能满足所有设计...

    表单验证jquery插件

    在Web开发中，表单验证是不可或缺的一部分，它确保用户输入的数据符合预设的规则，从而提高数据质量和用户体验。jQuery Validation Engine 是一个功能强大的表单验证插件，以其简单易用和丰富的自定义选项而受到...

    jquery表单验证特效

    "jquery表单验证特效"这个主题涉及到使用jQuery进行表单验证，这是一种提高用户体验的有效方式，通过实时验证用户输入的数据，确保其正确性和完整性，避免提交无效或错误的信息。 表单验证通常是网页应用程序不可或...

    【原创】jquery表单验证插件

    本人制作的jquery表单验证插件JfomValidate 功能：可以完成绝大数页面的脚本验证效果，压缩包里有示例和调用说明。 压缩包包含文件： index.html -- 说明及示例 JfomValidate.min.js -- 插件 jquery-1.3.2.min.js -...

    JQuery实现表单验证

    在"JQuery实现表单验证"的案例中，描述中提到有五种不同的提示方式，这些可能包括错误消息的显示位置、样式、动画效果等，以满足多样化的用户体验需求。 以下是使用JQuery进行表单验证的基本步骤： 1. **选择器与...

    jQuery表单验证插件EasyValidator 2.0带TIP提示效果

    **jQuery表单验证插件EasyValidator 2.0：打造高效且友好的用户输入体验** 在Web开发中，表单验证是不可或缺的一部分，它确保了用户提交的数据符合预期的格式和标准，从而防止无效数据的输入。jQuery作为一款广泛...

    jQuery表单验证插件

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

    jquery表单验证实例，对数字，字数，必填项等校验

    在"jquery表单验证实例，对数字，字数，必填项等校验"这个项目中，我们关注的核心知识点包括： 1. **jQuery Validate插件安装与引入**：首先，你需要在HTML文件中引入`jQuery`库和`jQuery Validate`插件的JS文件。...

    实用的jQuery表单验证代码.rar_实用的jQuery表单验证代码

    在表单验证中，jQuery可以方便地获取、修改用户输入，并通过自定义的验证规则进行检查。以下是一些关键的jQuery表单验证知识点： 1. **选择器与事件绑定**：jQuery的选择器语法简洁，可以轻松选取DOM元素。在表单...

    jquery表单验证

    在这个场景下，SSH可能与jQuery表单验证没有直接关系，但可能是项目背景的一部分，比如SSH可能用于后端服务器的数据传输或者自动化部署，确保数据的安全性。 在项目"FormValidateProject"中，很可能包含了使用...

    jQuery 表单验证扩展(三)

    jQuery表单验证插件通过定义一些规则来实现这样的范围验证，例如min和max属性分别表示允许的最小值和最大值。 在验证参数的设计方面，文章提到了几个关键的参数，它们分别是： - onEmptyText：当输入内容为空时...

    Jquery超强验证表单

    jQuery表单验证插件** jQuery有许多优秀的表单验证插件，例如jQuery Validation Plugin。这个插件提供了丰富的验证规则和自定义错误消息功能。通过简单的配置，可以实现各种复杂的验证需求。 **4. 验证规则** - **...

    jQuery表单验证实例代码

    在本文中，我们将深入探讨如何使用jQuery进行表单验证，主要基于给定的"jQuery表单验证实例代码"。jQuery库简化了JavaScript的DOM操作，使得表单验证变得更加容易和直观。以下是一些关于这个主题的关键知识点： 1. ...

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