扩展jquery.validate自定义验证,自定义提示,本地化
HTML
<!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>
jquery
/// <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
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; }