jQuery.validate自定义验证

最新推荐文章于 2022-04-01 16:04:03 发布

转载最新推荐文章于 2022-04-01 16:04:03 发布 · 658 阅读

文章标签：

#jquery

jquery 专栏收录该内容

3 篇文章

订阅专栏

 
  <!DOCTYPE html>  
   
 <html>  
 <head>  
     <meta name="viewport" content="width=device-width" />  
     <title>Index</title>  
     <link href="~/Css/css.css" rel="stylesheet" />  
     <script src="~/Js/jquery.min.js"></script>  
     <script src="~/Js/jquery.validate.min.js"></script>  
     <script src="~/Js/jquery.validate.extend.js"></script>  
     <script>  
         $(document).ready(function () {  
             $("#myform").validate({  
                 rules: {  
                     username: { required: true, minlength: 2 },  
                     password: { required: true, minlength: 6, maxlength: 16 },  
                     repassword: { required: true, equalTo: "#password" },  
                     amt: { required: true, isAmount: true },  
                     idcard: { required: true, isIdCardNo: true }  
                 },  
                 messages: {  
                     username: {  
                         required: "用户名不能为空",  
                         minlength: "用户名的最小长度为2"  
                     },  
                     password: {  
                         required: "密码不能为空",  
                         minlength: "密码长度不能少于6个字符",  
                         maxlength: "密码长度不能超过16个字符"  
                     },  
                     repassword: {  
                         required: "确认密码不能为空",  
                         equalTo: "确认密码和密码不一致"  
                     },  
                     amt: {  
                         required: "金额不能为空",  
                         isAmount: "交易金额必须大于0，且最多有两位小数"  
                     },  
                     idcard: {  
                         required: "身份证不能为空",  
                         isIdCardNo: "身份证号码错误"  
                     }  
                 }  
             });  
         });  
     </script>  
 </head>  
 <body>  
     <div>   
         <form id="myform" method="post" action="">  
             <fieldset>  
                 <legend>jquery-validate表单校验验证</legend>  
                 <div class="item">  
                     <label for="username" class="item-label">用户名:</label>  
                     <input type="text" id="username" name="username" class="item-text" placeholder="设置用户名">  
                 </div>  
                 <div class="item">  
                     <label for="password" class="item-label">密码:</label>  
                     <input type="password" id="password" name="password" class="item-text" placeholder="设置密码">  
                 </div>  
                 <div class="item">  
                     <label for="password" class="item-label">确认密码:</label>  
                     <input type="password" name="repassword" class="item-text" placeholder="设置确认密码">  
                 </div>  
                 <div class="item">  
                     <label for="amt" class="item-label">金额:</label>  
                     <input type="text" id="amt" name="amt" class="item-text" placeholder="交易金额">  
                 </div>  
                 <div class="item">  
                     <label for="idcard" class="item-label">身份证号码:</label>  
                     <input type="text" id="idcard" name="idcard" class="item-text" placeholder="身份证号码">  
                 </div>  
                 <div class="item">  
                     <input type="submit" value="提交" class="item-submit">  
                 </div>  
             </fieldset>  
         </form>  
     </div>  
 </body>  
 </html>  
 

[javascript]view plain copy 
   
 /// <reference path="jquery.js" />  
 // jquery.validate.extend.js  
 $.validator.setDefaults({  
     onkeyup: null,  
     success: function (label) {  
         label.text('').addClass('valid');  
     },  
     onfocusin: function (element) {  
         this.lastActive = element;  
         $(element).addClass('highlight');  
         if (this.settings.focusCleanup) {  
             if (this.settings.unhighlight) {  
                 this.settings.unhighlight.call(this, element, this.settings.errorClass, this.settings.validClass);  
             }  
             this.hideThese(this.errorsFor(element));  
         }  
     },  
     onfocusout: function (element) {  
         $(element).parent().children(".tip").remove();  
         $(element).removeClass('highlight');  
         this.element(element);  
     }  
 });  
   
 /***************************************************************** 
                   jQuery Validate扩展验证方法        
 *****************************************************************/  
 // 判断整数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);  
 }, "含有中英文特殊字符");  
   
   
 // 判断是否金额 小数点后两位  
 jQuery.validator.addMethod(  
     "isAmount",  
     function (value, element) {  
         return value && /^\d*\.?\d{0,2}$/.test(value);  
     },  
     "金额必须大于0且小数位数不超过2位"  
 );  
   
 //身份证号码的验证规则  
 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;  
 }  

[css] view plain copy

body {
font-family: Microsoft Yahei;
font-size: 15px;
}
fieldset {
width: 680px;
}
legend {
margin-left: 8px;
}
.item {
height: 56px;
line-height: 36px;
margin: 10px;
}
label {
float: left;
}
.item .item-label {
float: left;
width: 80px;
text-align: right;
}
.item-text {
float: left;
width: 244px;
height: 16px;
padding: 9px 25px 9px 5px;
margin-left: 10px;
border: 1px solid #ccc;
overflow: hidden;
}
.item-submit {
margin-left: 88px;
}
input.error {
border: 1px solid #E6594E;
}
input.highlight {
border: 1px solid #7abd54;
}
label.error, label.tip {
float: left;
font-size: 14px;
text-align: left;
margin-left: 5px;
padding-left: 20px;
color: red;
background: url('/images/error.png') no-repeat left center;
}
label.valid {
background: url('/images/right.png') no-repeat left center;

}

方法的使用如下：把“ stringCheck”直接放进就OK了。

	rules: {
            txtProductName: {
                required: true,
                stringCheck: true
            },

jQuery.validator.addMethod("stringCheck", function (value, element) {
    //return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);
    if ($("#txtProductName").val().length < 10) {
        return false;
    }
    else {
        return true;
    }
}, "请输入适合的长度");

//验证
function validateFrom() {
    $("#form1").validate({
        rules: {
            txtProductName: {
                required: true,
                stringCheck: true
            },
            txtMarketPrice: {
                required: true,
                number: true
            },
            txtIntegral: {
                required: true,
                digits: true
            }
        },
        messages: {
            txtProductName: {
                required: "请输入礼品名称"
            },
            txtMarketPrice: {
                required: "请输入市场价"
            },
            txtIntegral: {
                required: "请输入兑换积分"
            }
        }
        , success: function (label) {
            label.html("&nbsp;").attr("class", "success").siblings("label").remove();
        },
        errorPlacement: function (error, element) {
            $(element).next("span").find(".success").remove();
            error.appendTo(element.next("span"));
        }
    });