使用jQuery Validation驗證使用者輸入-2

by vivid 24. 八月 2016 17:28

.NET Magazine國際中文電子雜誌
作 者:許薰尹
審 稿:張智凱
文章編號: N160817401

出刊日期:2016/8/24
開發工具:Visual Studio 2015 Update 3

本文延續系列文章的第一篇《使用jQuery Validation驗證使用者輸入-1》的情境,來介紹jQuery Validation常用的驗證規則,包含如何使用程式設定驗證規則與錯誤訊息,以及常用的minlength、maxlength、equalTo、min、max、range等驗證規則。

使用程式設定驗證規則

除了搭配HTML5 驗證的Attribute(例如required)來進行驗證之外,你也可以利用JavaScript程式碼來設定驗證規則。例如以下程式碼範例,不在HTML Input方塊中設定「Required」Attribute,而是在程式中叫用validate()方法進行驗證時,設定「rules」,請參考下列程式碼:

<!DOCTYPE html>
<html>
<head>
    <title>
        會員註冊系統
    </title>
</head>
<body>
    <h1> My會員註冊系統 </h1>
    <form method="post" action="./Default.aspx" id="form1">
        <fieldset>
            <legend> 個人資料 </legend>
            <label for="txtAccount" id="lblAccount"> 使用者帳號 </label>
            <input name="txtAccount" type="text" id="txtAccount"  />

            <br />
            <label for="txtPwd" id="lblPwd"> 密碼 </label>
            <input name="txtPwd" type="password" id="txtPwd"  />
            <br />

            <label for="txtComfirmPwd" id="lblComfirmPwd"> 確認密碼 </label>
            <input name="txtComfirmPwd" type="password" id="txtComfirmPwd"  />
            <br />

            <input type="submit" name="btnRegister" value="註冊" id="btnRegister" />
        </fieldset>
    </form>
    <script src="Scripts/jquery-3.1.0.min.js"></script>
    <script src="Scripts/jquery.validate.min.js"></script>
    <script src="Scripts/messages_zh_TW.min.js"></script>
    <script>
        $(function () {
            $("#form1").validate({
                rules: {
                    txtAccount: "required",
                    txtPwd: "required",
                    txtComfirmPwd: "required"
                }
            });
        });
    </script>
</body>
</html>

「rules」包含表單項目,以及對應的驗證邏輯,以此例而言,txtAccount、txtPwd與txtComfirmPwd表單項目的驗證規則設定為「required」)。執行時,當資料驗證有問題時,便不讓你提交資料到伺服端,可以看看到顯示以下錯誤資訊,請參考下圖所示:

clip_image002

圖 1:驗證錯誤訊息。

設定錯誤訊息樣式

預設錯誤訊息使用黑色字呈現,較不明顯,你可以利用CSS來設定錯誤訊息樣式,改用比較醒目的顏色或字體來顯示錯誤訊息。我們先觀察一下驗證錯誤時顯示錯誤訊息的HTML項目,以Chrome瀏覽器為例子,只要在執行階段點選錯誤訊息,按滑鼠右鍵,選取「Inspect」項目,就可以開啟除錯視窗,請參考下圖所示:

clip_image004

圖 2:客製化錯誤訊息樣式。

請參考下列程式碼:

<label id="txtAccount-error" class="error" for="txtAccount">必須填寫</label>

錯誤訊息使用<label>標籤呈現,此標籤class attribute套用了「error」樣式,只要改寫這個CSS類別,便可以自訂錯誤訊息的顯示樣式。

我們可以修改程式碼,先在網站加入一個樣式表檔案,如StyleSheet.css,在檔案中設定樣式,將字體的顏色設定為較醒目的紅色,請參考下列程式碼:

.error {

color:red;

}

接著就可以在HTML網頁中使用<link>標籤引用這個樣式檔案,請參考下列程式碼:

<!DOCTYPE html>
<html>
<head>
    <title>
        會員註冊系統
    </title>
    <link href="Content/StyleSheet.css" rel="stylesheet" />
</head>
<body>
    <h1>My會員註冊系統</h1>
    <form method="post" action="./Default.aspx" id="form1">
        <fieldset>
            <legend> 個人資料 </legend>
            <label for="txtAccount" id="lblAccount"> 使用者帳號 </label>
            <input name="txtAccount" type="text" id="txtAccount"  />

            <br />
            <label for="txtPwd" id="lblPwd"> 密碼 </label>
            <input name="txtPwd" type="password" id="txtPwd"  />
            <br />

            <label for="txtComfirmPwd" id="lblComfirmPwd">確認密碼</label>
            <input name="txtComfirmPwd" type="password" id="txtComfirmPwd"  />
            <br />

            <input type="submit" name="btnRegister" value="註冊" id="btnRegister" />
        </fieldset>
    </form>
    <script src="Scripts/jquery-3.1.0.min.js"></script>
    <script src="Scripts/jquery.validate.min.js"></script>
    <script src="Scripts/messages_zh_TW.min.js"></script>
    <script>
        $(function () {
            $("#form1").validate({
                rules: {
                    txtAccount: "required",
                    txtPwd: "required",
                    txtComfirmPwd: "required"
                }
            });
        });
    </script>
</body>
</html>

 

執行時,當資料驗證有問題時,可以看看到顯示以下錯誤資訊,訊息的字為紅色的,請參考下圖所示:

clip_image006

圖 3:設定錯誤訊息樣式。

使用JavaScript程式自訂錯誤訊息

除了利用前文介紹的data-attribute、title來設定錯誤訊息之外,也可以利用JavaScript程式碼來自訂錯誤訊息。請參考以下範例程式碼,叫用表單(form1)validate() 方法進行表單驗證時,利用messages來設定錯誤訊息:

<!DOCTYPE html>
<html>
<head>
    <title>
        會員註冊系統
    </title>
    <link href="Content/StyleSheet.css" rel="stylesheet" />
</head>
<body>
    <h1>My會員註冊系統</h1>
    <form method="post" action="./Default.aspx" id="form1">
        <fieldset>
            <legend> 個人資料 </legend>
            <label for="txtAccount" id="lblAccount"> 使用者帳號 </label>
            <input name="txtAccount" type="text" id="txtAccount"  />

            <br />
            <label for="txtPwd" id="lblPwd"> 密碼 </label>
            <input name="txtPwd" type="password" id="txtPwd"  />
            <br />

            <label for="txtComfirmPwd" id="lblComfirmPwd"> 確認密碼 </label>
            <input name="txtComfirmPwd" type="password" id="txtComfirmPwd"  />
            <br />

            <input type="submit" name="btnRegister" value="註冊" id="btnRegister" />
        </fieldset>
    </form>
    <script src="Scripts/jquery-3.1.0.min.js"> </script>
    <script src="Scripts/jquery.validate.min.js"> </script>
    <script src="Scripts/messages_zh_TW.min.js"> </script>
    <script>
        $(function () {
            $("#form1").validate({
                rules: {
                    txtAccount: "required",
                    txtPwd: "required",
                    txtComfirmPwd: "required"
                },
                messages: {
                    txtAccount: {
                        required: "帳號不可以為空白"
                    },
                    txtPwd: {
                        required: "密碼不可以為空白"
                    },
                    txtComfirmPwd: {
                        required: "確認密碼不可以為空白"
                    }
                }
            });
        });
    </script>
</body>
</html>

 

執行時,當資料驗證有問題時,可以看看到顯示以下錯誤資訊,請參考下圖所示:

clip_image008

圖 4:使用JavaScript程式自訂錯誤訊息。

接下來我們再來看看幾種jQuery Validation預設的驗證功能。

minlength、maxlength驗證規則

「minlength」規則用來設定INPUT方塊最少該輸入的字元;而「maxlength」規則用來設定INPUT方塊最多可輸入的字元,參考以下範例程式碼,設定txtAccount與txtPwd文字方塊最少要輸入兩個字,最多不可以超過20個字;當發生錯誤,我們利用jQuery.validator.format()方法來格式化錯誤訊息,其中的「{0}」是參數的意思,會分別填入「minlength」或 「maxlength」設定的值:

 

<!DOCTYPE html>
<html>
<head>
    <title>
        會員註冊系統
    </title>
    <link href="Content/StyleSheet.css" rel="stylesheet" />
</head>
<body>
    <h1> My會員註冊系統 </h1>
    <form method="post" action="./Default.aspx" id="form1">
        <fieldset>
            <legend> 個人資料 </legend>
            <label for="txtAccount" id="lblAccount"> 使用者帳號 </label>
            <input name="txtAccount" type="text" id="txtAccount" />
            <br />
            <label for="txtPwd" id="lblPwd"> 密碼 </label>
            <input name="txtPwd" type="password" id="txtPwd" />
            <br />
            <label for="txtComfirmPwd" id="lblComfirmPwd"> 確認密碼 </label>
            <input name="txtComfirmPwd" type="password" id="txtComfirmPwd" />
            <br />
            <input type="submit" name="btnRegister" value="註冊" id="btnRegister" />
        </fieldset>
    </form>
    <script src="Scripts/jquery-3.1.0.min.js"></script>
    <script src="Scripts/jquery.validate.min.js"></script>
    <script src="Scripts/messages_zh_TW.min.js"></script>
    <script>
        $(function () {
            $("#form1").validate({
                rules: {
                    txtAccount: {
                        required: true,
                        minlength: 2,
                        maxlength: 20
                    },
                    txtPwd: {
                        required: true,
                        minlength: 8,
                        maxlength: 20
                    },
                    txtComfirmPwd: "required"
                },
                messages: {
                    txtAccount: {
                        required: "帳號不可以為空白",
                        maxlength: jQuery.validator.format("帳號最多只能{0}個字")
                    },
                    txtPwd: {
                        required: "密碼不可以為空白",
                        minlength: jQuery.validator.format("密碼最少要輸入{0}個字")
                    },
                    txtComfirmPwd: {
                        required: "確認密碼不可以為空白"
                    }
                }
            });
        });
    </script>
</body>
</html>

執行時,當資料驗證有問題時,可以看看到顯示以下maxlength錯誤資訊,請參考下圖所示:

clip_image010

圖 5:minlength maxlength驗證。

以下則是minlength規則驗證錯誤的資訊,請參考下圖所示:

clip_image012

圖 6: minlength maxlength驗證。

使用equalTo比較相等

我們的註冊表單還需要驗證使用者輸入的「密碼」與「確認密碼」兩個欄位的值是否相等,我們可以利用「equalTo」規則來進行比較,參考以下範例程式碼,在確認密碼(txtComfirmPwd)的文字方塊設定「equalTo」規則,並利用ID選取器,指定要與密碼(txtPwd)文字方塊的值進行比對:

 

<!DOCTYPE html>
<html>
<head>
    <title>
        會員註冊系統
    </title>
    <link href="Content/StyleSheet.css" rel="stylesheet" />
</head>
<body>
    <h1>My會員註冊系統</h1>
    <form method="post" action="./Default.aspx" id="form1">
        <fieldset>
            <legend> 個人資料 </legend>
            <label for="txtAccount" id="lblAccount"> 使用者帳號 </label>
            <input name="txtAccount" type="text" id="txtAccount" />

            <br />
            <label for="txtPwd" id="lblPwd"> 密碼 </label>
            <input name="txtPwd" type="password" id="txtPwd" />
            <br />

            <label for="txtComfirmPwd" id="lblComfirmPwd"> 確認密碼 </label>
            <input name="txtComfirmPwd" type="password" id="txtComfirmPwd" />
            <br />

            <input type="submit" name="btnRegister" value="註冊" id="btnRegister" />
        </fieldset>
    </form>
    <script src="Scripts/jquery-3.1.0.min.js"></script>
    <script src="Scripts/jquery.validate.min.js"></script>
    <script src="Scripts/messages_zh_TW.min.js"></script>
    <script>
        $(function () {
            $("#form1").validate({
                rules: {
                    txtAccount: {
                        required: true,
                        minlength: 2,
                        maxlength: 20
                    },
                    txtPwd: {
                        required: true,
                        minlength: 8,
                        maxlength: 20
                    },
                    txtComfirmPwd: {
                        required: true,
                        minlength: 8,
                        maxlength: 20,
                        equalTo: "#txtPwd"
                    }
                },
                messages: {
                    txtAccount: {
                        required: "帳號不可以為空白",
                        maxlength: jQuery.validator.format("帳號最多只能{0}個字")
                    },
                    txtPwd: {
                        required: "密碼不可以為空白",
                        minlength: jQuery.validator.format("密碼最少要輸入{0}個字")
                    },
                    txtComfirmPwd: {
                        required: "確認密碼不可以為空白",
                        equalTo: "密碼與確認密碼不相符"
                    }
                }
            });
        });
    </script>
</body>
</html>

若密碼和確認密碼不相符,導致驗證錯誤,則利用messages設定錯誤訊息為「密碼與確認密碼不相符」,請參考下圖所示:

clip_image014

圖 7:密碼與確認密碼不相符。

min、max、range驗證規則

針對文字的輸入個數,可以使用「minlength」、「maxlength」驗證規則做檢查;而針對數值的驗證,可以使用「min」、「max」以及「range」規則,分別檢查最小值、最大值與有效範圍。參考以下範例程式碼,使用「range」規則設定年齡(numAge)的有效範圍在18到100之間;使用「min」規則設定身高最少要100;使用「max」規則設定身高最多不超過200:

<!DOCTYPE html>
<html>
<head>
    <title>
        會員註冊系統
    </title>
    <link href="Content/StyleSheet.css" rel="stylesheet" />
</head>
<body>
    <h1> My會員註冊系統 </h1>
    <form method="post" action="./Default.aspx" id="form1">
        <fieldset>
            <legend> 個人資料 </legend>
            <label for="txtAccount" id="lblAccount"> 使用者帳號 </label>
            <input name="txtAccount" type="text" id="txtAccount" />
            <br />
            <br />
            <label for="numAge" id="lblAge"> 年齡 </label>
            <input name="numAge" type="number" id="numAge" />
            <br />
            <br />
            <label for="txtTall" id="lblTall"> 身高 </label>
            <input name="txtTall" type="text" id="txtTall" />
            <br />
            <br />
            <input type="submit" name="btnRegister" value="註冊" id="btnRegister" />
        </fieldset>
    </form>
    <script src="Scripts/jquery-3.1.0.min.js"></script>
    <script src="Scripts/jquery.validate.min.js"></script>
    <script src="Scripts/messages_zh_TW.min.js"></script>
    <script>
        $(function () {
            $("#form1").validate({
                rules: {
                    numAge: {
                        range: [18, 100]
                    },
                    txtTall: {
                        min: 100,
                        max: 220
                    }
                },
                messages: {
                    numAge: {
                        range: jQuery.validator.format("年齡應該在{0}到{1}之間")
                    },
                    txtTall: {
                        min: "身高最少要100",
                        max: "身高最多不超過200"
                    }
                }
            });
        });
    </script>
</body>
</html>

 

執行時,當年齡資料驗證有問題時,可以看到使用「minlength」規則驗證,驗證不通過時,將顯示以下錯誤資訊,請參考下圖所示:

clip_image016

圖 8:使用minlength驗證規則驗證。

當年齡資料驗證有問題時,可以看到使用「min」規則驗證,驗證不通過時,將顯示以下錯誤資訊,請參考下圖所示:

clip_image018

圖 9:使用min驗證規則驗證。

以及使用「max」驗證規則驗證,驗證不通過時,將顯示以下錯誤資訊,請參考下圖所示:

clip_image020

圖 10:使用max驗證規則驗證。

Tags:

.NET Magazine國際中文電子雜誌 | ASP.NET | JavaScript | 許薰尹Vivid Hsu

新增評論




  Country flag
biuquote
  • 評論
  • 線上預覽
Loading






NET Magazine國際中文電子雜誌

NET Magazine國際中文電子版雜誌,由恆逸資訊創立於2000,自發刊日起迄今已發行超過500篇.NET相關技術文章,擁有超過40000名註冊讀者群。NET Magazine國際中文電子版雜誌希望藉於電子雜誌與NET Developer達到共同學習與技術新知分享,歡迎每一位對.NET 技術有興趣的朋友們多多支持本雜誌,讓作者群們可以有持續性的動力繼續爬文。<請加入免費訂閱>

月分類Month List