jQuery Validate(二)

時間  2019-11-12
標籤 jquery validate 欄目 JQuery 简体版
原文   原文鏈接

剛剛試了所謂的新版的用法。千萬別問我是多新，由於我也不知道。。。javascript

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.js"></script>
<script src="js/jquery.validate.js"></script>
<script>
    $().ready(function() {
        $("#registerForm").validate();
    });
</script>
</head>
<body>
    <form id="registerForm" method="get" action="">
        <fieldset>
            <p>
                <label for="cusername">用戶名</label> 
                <input id="cusername" name="username" type="text" data-rule-required="true" data-rule-rangelength="[2,10]" data-msg-required="用戶名不能爲空" data-msg-rangelength="用戶名長度必須是{0}到{1}個字符">
            </p>
            <p>
                <label for="cpassword">密碼</label> 
                <input id="cpassword" name="password" type="password" data-rule-required="true" data-rule-minlength="6" data-msg-required="密碼不能爲空" data-msg-minlength="密碼必須很多於{0}位">
            </p>
            <p>
                <label for="cconfirmpassword">確認密碼</label> 
                <input id="cconfirmpassword" name="confirmpassword" type="password" data-rule-required="true" data-rule-equalTo="#cpassword" data-msg-required="請再次輸入密碼" data-msg-equalTo="兩次輸入的密碼不一致">
            </p>
            <p>
                <label for="cemail">郵箱</label> 
                <input id="cemail" name="email" data-rule-required="true" data-rule-email="true" data-msg-required="郵箱不能爲空" data-msg-email="郵箱的格式不正確"/>
            </p>
            <p>
                <input type="submit" value="提交">
            </p>
        </fieldset>
    </form>
</body>
</html>
JV3-1.HTML

 我的感受這種用法比經過javascript自定義驗證規則，要方便和簡單多了。昨天在剛開始自定義的時候，老是沒法正確的提示，當時徹底不知道爲何。直到檢查了多遍才發現，原來是由於個人rules裏的鍵值對之間漏了一個逗號。因此，若是默認的校驗規則已經知足你的驗證需求，而你只是想改變一下提示語。那我我的建議你用這種新版的用法，固然也能夠用 系列(一) 裏的方法二。具體看狀況本身選擇。html

還有我上面的提示都是默認的黑色，身爲提示，那樣也太沒存在感了。java

爲了增長存在感，你只須要在<head></head>之間插入下面的代碼就能夠了。jquery

<style>
    #registerForm label.error{
        margin-left: 10px;
        color:red;
    }
</style>
View Code

請注意上面的#號後面跟着是表單的ID，你須要改爲你本身相應的表單ID。我昨天嘗試的時候，找到的資料裏寫的是#frm。當時我還覺得#frm又是我沒接觸過的新用法呢，我還一直疑惑，爲何個人提示不顯示成紅色。基礎差哎。。。正則表達式

 

若是默認的驗證規則已經不能知足你的需求，那麼接下來，你就得自定義驗證規則了。ide

好比，這裏有一個需求，要你檢查用戶輸入的郵編是否合法，這時你就得自定義驗證規則了，使用的方法是jQuery.validator.addMethod()。函數

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.js"></script>
<script src="js/jquery.validate.js"></script>
<script>
    $().ready(function() {
        jQuery.validator.addMethod("isZipCode", function(value, element) {
            var tel = /^[0-9]{6}$/;
            return this.optional(element) || (tel.test(value));
        }, "請正確填寫您的郵政編碼");
        $("#registerForm").validate({
            rules : {
                zipCode : {
                    required : true,//對於required的提示語句沒有進行任何的處理，他會使用默認的英文的提示。
                    isZipCode : true//isZipCode爲自定義的驗證規則
                }
            },
            messages : {//當你不寫提示語句,他會使用上面方法返回的提示。
                zipCode : {
                    isZipCode : '請輸入正確的郵編'
                }
            }
        });
    });
</script>
<style>
#registerForm label.error {
    margin-left: 10px;
    color: red;
}
</style>
</head>
<body>
    <form id="registerForm" method="get" action="">
        <fieldset>
            <p>
                <label for="czipCode">中國郵編</label> 
                <input id="czipCode" name="zipCode" />
            </p>
            <p>
                <input type="submit" value="提交">
            </p>
        </fieldset>
    </form>
</body>
</html>
jv3-3.html

固然，你也能夠把這個驗證規則提取出來存到一個JS文件裏，而後在要用的地方引入JS文件。ui

jQuery.validator.addMethod("isZipCode", function(value, element) {
    var tel = /^[0-9]{6}$/;
    return this.optional(element) || (tel.test(value));
}, "請正確填寫您的郵政編碼");
validate.expand.js 
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.js"></script>
<script src="js/jquery.validate.js"></script>
<script src="js/validate.expand.js"></script>
<script>
    $().ready(function() {
        $("#registerForm").validate({
            rules : {
                zipCode : {
                    required : true,//對於required的提示語句沒有進行任何的處理，他會使用默認的英文的提示。
                    isZipCode : true//isZipCode爲自定義的驗證規則
                }
            },
            messages : {//當你不寫提示語句,他會使用方法返回的提示。
                zipCode : {
                    isZipCode : '請輸入正確的郵編'
                }
            }
        });
    });
</script>
<style>
#registerForm label.error {
    margin-left: 10px;
    color: red;
}
</style>
</head>
<body>
    <form id="registerForm" method="get" action="">
        <fieldset>
            <p>
                <label for="czipCode">中國郵編</label> 
                <input id="czipCode" name="zipCode" />
            </p>
            <p>
                <input type="submit" value="提交">
            </p>
        </fieldset>
    </form>
</body>
</html>
jv3-4.html

 

接下來，就要好好說說jQuery.validator.addMethod() 這個方法，這個方法一共有三個參數。this

第一個參數 ：「isZipCode」 是定義方法名，必須保證方法名惟一。編碼

第二個參數：是一個回調（callback）函數。

　　這個回調函數有三個參數：

　　　　第一個：value ，是當前被驗證的元素的值。

　　　　第二個：element，是當前被驗證的元素。

　　　　第三個：param，是傳入的參數，例如： minlength : 6  裏的參數爲6;  rangelength：[2,10]  裏的參數爲2和10。當你沒有傳入參數，這個能夠省略不寫。

　　　　在這個回調函數裏有一個this.optional(element)函數要特別注意。當表單的輸入值爲空時，即element的值爲空，this.optional(element)的返回值爲true，相似於判空操做，也就是說該表單輸入項不是必填項，當不填時經過了驗證。若是element的值不爲空，this.optional(element)的返回值就是false，這時就要根據  ||  後面的驗證來判斷最終的返回爲true 或false。因此當某個輸入項不是必填項但若是填寫了又須要按照必定的規則來驗證的時候，必定要記得帶上this.optional(element)。

第三個參數：驗證的提示信息。

　　這個參數能夠直接是一句提示信息，例如，"這是必填字段"；也能夠經過建立函數jQuery.validator.format(value)來顯示，例如，$.validator.format("請輸入長度在 {0} 到 {1} 之間的字符串")，其中 {0} {1} 表明該方法的參數，也就是回調（callback）函數裏的第三個參數param。

 

官網提供的additional-methods.js裏包含一些經常使用的驗證方式，好比lettersonly，ziprange，nowhitespace等，但我粗略的看了一下，發現大部分只是僅供參考，實用性不強，不能直接使用。

我整理了幾個網上找到的驗證規則，固然也僅供參考。驗證規則的核心就是正則表達式，這個得學。

// 郵政編碼驗證 
jQuery.validator.addMethod("isZipCode", function(value, element) {
var tel = /^[0-9]{6}$/;
return this.optional(element) || (tel.test(value));
}, "請正確填寫您的郵政編碼");

// 手機號碼驗證 
jQuery.validator.addMethod("mobile", function(value, element) { 
var length = value.length;
var mobile = /^(13[0-9]|14[0-9]|15[0-9]|18[0-9])\d{8}$/;
return this.optional(element) || (length == 11 && mobile.test(value)); 
}, "手機號碼格式錯誤"); 

// QQ號碼驗證 
jQuery.validator.addMethod("qq", function(value, element) { 
var tel = /^[1-9]\d{4,10}$/; 
return this.optional(element) || (tel.test(value)); 
}, "qq號碼格式錯誤"); 

// IP地址驗證 
jQuery.validator.addMethod("ip", function(value, element) { 
var ip = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/; 
return this.optional(element) || (ip.test(value) && (RegExp.$1 < 256 && RegExp.$2 < 256 && RegExp.$3 < 256 && RegExp.$4 < 256)); 
}, "Ip地址格式錯誤"); 

// 字母和數字的驗證 
jQuery.validator.addMethod("chrnum", function(value, element) { 
var chrnum = /^([a-zA-Z0-9]+)$/; 
return this.optional(element) || (chrnum.test(value)); 
}, "只能輸入數字和字母(字符A-Z, a-z, 0-9)"); 

// 中文的驗證 
jQuery.validator.addMethod("chinese", function(value, element) { 
var chinese = /^[\u4e00-\u9fa5]+$/; 
return this.optional(element) || (chinese.test(value)); 
}, "只能輸入中文");
validate.expand.js
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程