碼上歡樂
相關內容    簡體    繁體

擴展jquery.validate自定義驗證，自定義提示，本地化

本文轉載自   查看原文   2018-11-02 09:18   1066 

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

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 jquery.validate自定義驗證--成功提示與摘要提示 jquery validate添加自定義驗證。。。。 jquery validate 自定義驗證方法 jquery validate 自定義驗證方法 日期驗證 jquery.validate使用 - 自定義錯誤信息 jQuery validate 日期比較 自定義驗證方法 jQuery Validate 表單驗證插件----自定義校驗結果樣式 jquery validate自定義checkbox驗證規則和樣式 Jquery Validate 相關參數及常用的自定義驗證規則 Jquery Validate表單驗證，自定義校驗正整數
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM