扩展jquery.validate自定义验证，自定义提示，本地化

2022-09-30 20:09:01

<!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>

/// <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;

}

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;

}

码农公寓

相关文章