投稿
  1. 云图网首页
  2. 技术专区
  3. 编程笔记

扩展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; 
}

 

原创文章，作者：Maggie-Hunter，如若转载，请注明出处：https://blog.ytso.com/16521.html

赞 (0)
0 0
上一篇 2021年7月19日
下一篇 2021年7月19日

相关推荐

发表回复

登录后才能评论