jquery.validate.min.js 用法方法示例

時間  2019-12-06
標籤 jquery.validate.min.js jquery validate min 用法 方法 示例 欄目 JQuery 简体版
原文   原文鏈接

頁面html 代碼javascript

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head runat="server">  
    <title>jquery.validate.min.js 用法方法示例</title>  
    <script type="text/javascript" src="/js1/jquery-1.4a2.min.js"></script>  
    <script src="../js1/base.js" type="text/javascript"></script>  
    <script src="../js1/validate/jquery.validate.min.js" type="text/javascript"></script>  
    <script src="../js1/validate/validatecode.js" type="text/javascript"></script>  
  <style type="text/css">  
      
      .span9{ width:245px; padding-right:10px; font-size:14px; color:#505050;line-height:33px; height:33px; display:inline-block; text-align:right;}  
  .span9 b{ font-weight:normal; font-size:12px; position:relative; top:3px; color:#f00; right:5px;}  
  .input1{ height:31px; width:230px; border:1px solid #DBDBDB; padding:0;}  
  .input2{ width:340px;}  
  .span10{line-height:33px; height:33px; color:#A7A7A7; padding-left:10px;}  
  .div10 textarea{ padding:5px; width:330px; height:80px; resize:none;} 
label.error  
{  
    display: inline-block;  
    margin-left: 5px;  
    padding: 5px 0 5px 20px;  
    color: #F00;  
    font-size: 12px;  
    line-height: 12px;  
    background: url(../images1/validate_bg.gif) 0 3px no-repeat;  
    vertical-align: middle;  
    color: Red;  
    margin-top: 7px;  
}  
label.success  
{  
    background: url(../images1/validate_bg.gif) 0 -22px no-repeat;  
    vertical-align: middle;  
    margin-top: 7px;  
}  
.ipt_txt  
{  
    width: 150px;  
    border: 1px solid #B1C3D9;  
    background-color: #FBFBFB;  
}  
input.error  
{  
    background-color: #FBE2E2;  
}  
  
  
    </style>  
</head>  
<body>  
    <form id="cerform" runat="server">  
   <div>  
                          <span class="span9"><b>*</b>用戶真實姓名</span><input id="txtUserName" runat="server" class="input1 ipt_txt"  
                                type="text" />  
                                <span class="span10">請輸入您的真實姓名</span></div>  
                        <div class="clear height20">  
                        </div>  
                        <div>  
                            <span class="span9"><b>*</b>身份證號碼</span><input id="txtUserCardID" runat="server"  
                                class="input1 input2 ipt_txt" type="text" /><span class="span10">請輸入您的身份證號碼</span></div>  
                        <div class="clear height20">  
                        </div>  
                        <div>  
                            <span class="span9"><b>*</b>認證說明</span><textarea id="txtAreaContent" runat="server"></textarea><span class="span10">請完善認證說明，成功認證後，將出如今您的認證說明介紹中</span></div>  
                        <div class="clear height20">  
                        </div>  
                        <div>  
                            <span class="span9"><b>*</b>聯繫郵箱</span><input id="txtEmail" class="input1 ipt_txt" type="text" runat="server"/><span  
                                class="span10">請輸入您的電子郵箱</span></div>  
                        <div class="clear height20">  
                        </div>  
                        <div>  
                            <span class="span9"><b>*</b>手機號碼</span><input id="txtPhone" class="input1 ipt_txt" type="text" runat="server"/><span  
                                class="span10">請輸入能聯繫上您的手機號碼</span></div>  
                        <div class="clear height20">  
                        </div>  
                        <div>  
                            <span class="span9"></span>  
                            <input type="submit" class="button_a" value="提交認證" /></div>  
    </form>  
</body>  
</html>

下面 是核心js代碼css

//如下爲自定義方法，validate方法中沒有的  
  
  
//判斷兩個值是否相等  
jQuery.validator.addMethod("notEqualTo", function (value, element, param) {  
    return value != $(param).val();  
}, $.validator.format("兩次輸入不能相同!"));  
  
  
//只能輸入數字  
jQuery.validator.addMethod("isNum", function (value, element) {  
    var RegExp = /^\d+$/;  
    return RegExp.test(value);  
}, $.validator.format("只能爲數字!"));  
  
  
//規則名：buga,value檢測對像的值    
$.validator.addMethod("buga", function (value) {  
    return value == "buga";  
}, 'Please enter "buga"!');  
  
  
//規則名：chinese，value檢測對像的值，element檢測的對像    
$.validator.addMethod("chinese", function (value, element) {  
    var chinese = /^[\u4e00-\u9fa5]+$/;  
    return (chinese.test(value)) || this.optional(element);  
}, "只能輸入中文");  
  
  
//規則名：byteRangeLength，value檢測對像的值，element檢測的對像,param參數    
jQuery.validator.addMethod("byteRangeLength", function (value, element, param) {  
    var length = value.length;  
    for (var i = 0; i < value.length; i++) {  
        if (value.charCodeAt(i) > 127) {  
            length++;  
        }  
    }  
    return this.optional(element) || (length >= param[0] && length <= param[1]);  
}, $.validator.format("請確保輸入的值在{0}-{1}個字節之間(一箇中文字算2個字節)"));  
  
  
// 聯繫電話(手機/電話皆可)驗證  
jQuery.validator.addMethod("isPhone", function (value, element) {  
    var length = value.length;  
    var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;  
    var tel = /^\d{3,4}-?\d{7,9}$/;  
    return this.optional(element) || (tel.test(value) || mobile.test(value));  
  
  
}, "請正確填寫您的聯繫電話");  
  
  
// 郵政編碼驗證  
jQuery.validator.addMethod("isZipCode", function (value, element) {  
    var tel = /^[0-9]{6}$/;  
    return this.optional(element) || (tel.test(value));  
}, "請正確填寫您的郵政編碼");  
  
  
  
  
// 字符驗證  
jQuery.validator.addMethod("string", function (value, element) {  
    return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);  
}, "不容許包含特殊符號!");  
  
  
// 必須以特定字符串開頭驗證  
jQuery.validator.addMethod("begin", function (value, element, param) {  
    var begin = new RegExp("^" + param);  
    return this.optional(element) || (begin.test(value));  
}, $.validator.format("必須以 {0} 開頭!"));  
  
  
// 驗證兩次輸入值是否不相同  
jQuery.validator.addMethod("notEqualTo", function (value, element, param) {  
    return value != $(param).val();  
}, $.validator.format("兩次輸入不能相同!"));  
  
  
// 驗證值不容許與特定值等於  
jQuery.validator.addMethod("notEqual", function (value, element, param) {  
    return value != param;  
}, $.validator.format("輸入值不容許爲{0}!"));  
  
  
// 驗證值必須大於特定值(不能等於)  
jQuery.validator.addMethod("gt", function (value, element, param) {  
    return value > param;  
}, $.validator.format("輸入值必須大於{0}!"));  
  
  
// 驗證值小數位數不能超過兩位  
jQuery.validator.addMethod("decimal", function (value, element) {  
    var decimal = /^-?\d+(\.\d{1,2})?$/;  
    return this.optional(element) || (decimal.test(value));  
}, $.validator.format("小數位數不能超過兩位!"));  
  
  
//字母數字  
jQuery.validator.addMethod("alnum", function (value, element) {  
    return this.optional(element) || /^[a-zA-Z0-9]+$/.test(value);  
}, "只能包括英文字母和數字");  
  
  
// 漢字  
jQuery.validator.addMethod("chcharacter", function (value, element) {  
    var tel = /^[\u4e00-\u9fa5]+$/;  
    return this.optional(element) || (tel.test(value));  
}, "請輸入漢字");  
  
  
// 身份證號碼驗證（增強驗證）  
jQuery.validator.addMethod("isIdCardNo", function (value, element) {  
    return this.optional(element) || /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/.test(value) || /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[A-Z])$/.test(value);  
}, "請正確輸入您的身份證號碼");  
  
  
// 手機號碼驗證  
jQuery.validator.addMethod("isMobile", function (value, element) {  
    var length = value.length;  
    var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;  
    return this.optional(element) || (length == 11 && mobile.test(value));  
}, "請正確填寫您的手機號碼");  
  
  
// 電話號碼驗證  
jQuery.validator.addMethod("isTel", function (value, element) {  
    var tel = /^\d{3,4}-?\d{7,9}$/;    //電話號碼格式010-12345678  
    return this.optional(element) || (tel.test(value));  
}, "請正確填寫您的電話號碼");  
  
  
//頁面加載時調用  
$(function () {  
    $('#cerform').validate({  
        rules: {  
            txtUserName: {  
                required: true,  
                maxlength: 8,  
                minlength: 4  
            },  
            txtUserCardID: {  
                required: true,  
                maxlength: 18,  
                minlength: 18,  
                isIdCardNo: "#txtUserCardID"  
            },  
            txtUserPwd: {  
                required: true,  
                maxlength: 18,  
                minlength: 6,  
                notEqualTo: "#txtUserPwd"  
            },  
            txtRUserPwd: {  
                required: true,  
                equalTo: "#txtUserPwd"  
            },  
            txtAddress: {  
                required: true,  
                maxlength: 50  
            },  
            txtAreaContent: {  
                required: true,  
                maxlength: 300  
            },  
            txtUrl: {  
                required: true,  
                url: true  
            },  
            txtPhone: {  
                required: true,  
                minlength: 7,  
                maxlength: 13,  
                isTell: true,  
                isMobile: "#txtPhone"  
            },  
            txtZipCode: {  
                required: true,  
                minlength: 6,  
                maxlength: 6,  
                isNum: true  
            },  
            txtEmail: {  
                required: true,  
                email: true,  
                maxlength: 40  
            }  
        },  
        messages: {  
            txtUserName: {  
                required: "用戶名不能爲空！",  
                maxlength: "最長爲18個字符！",  
                minlength: "最短爲4個字符！",  
                remote: "該用戶名已被佔用！"  
            },  
            txtUserCardID: {  
                required: "身份證不能爲空！",  
                maxlength: "身份證爲18個字符！",  
                minlength: "身份證爲18個字符！"  
            },  
            txtUserPwd: {  
                required: "密碼不能爲空！",  
                maxlength: "最長爲18個字符！",  
                minlength: "最短爲6個字符！",  
                notEqualTo: "用戶名和密碼不能相同！"  
            },  
            txtRUserPwd: {  
                required: "密碼不能爲空！",  
                equalTo: "兩次輸入密碼不相同！"  
            },  
            txtAddress: {  
                required: "地址不能爲空！",  
                maxlength: "最長50個字符！"  
            },  
            txtAreaContent: {  
                required: "不能爲空！",  
                maxlength: "最長300個字符！"  
            },  
            txtUrl: {  
                required: "網址不能爲空！",  
                url: "請填寫正確的網址！"  
            },  
            txtPhone: {  
                required: "電話不能爲空！",  
                minlength: "最少7個數字！",  
                maxlength: "最長13個數字！",  
                isTell: "電話格式不正確！"  
            },  
            txtZipCode: {  
                required: "郵編不能爲空！",  
                minlength: "郵編爲6個數字！",  
                maxlength: "郵編爲6個數字！",  
                isNum: "請輸入數字！"  
            },  
            txtEmail: {  
                required: "郵箱不能爲空！",  
                email: "郵箱格式不正確！",  
                maxlength: "最長40個字符！"  
            }  
        },  
        errorPlacement: function (error, element) {  
            error.appendTo(element.parent());  
        },  
        submitHandler: function (form) {  
            form.submit();  
        },  
        errorClass: "error",  
        focusCleanup: true, //被驗證的元素得到焦點時移除錯誤信息  
        success: function (label) {  
            label.html("<span style=\"color:green\">填寫正確！</span>").addClass("success");  
        }  
    });  
  
  
  
  
    //全部使用「.ipt_txt」樣式的文本框加上效果，得到焦點文本框變成淡黃色  
    $(".ipt_txt").focus(function () {  
        $(this).css("background-color", "#FFFFCC").blur(function () {  
            $(this).css("background-color", "#FBFBFB");  
        });  
    });  
});

以上是jquery.validate.min.js 全部方法示例html

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程