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

by vivid 7. 九月 2016 17:27

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

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

本文延續系列文章的第一篇《使用jQuery Validation驗證使用者輸入-1》與第二篇《使用jQuery Validation驗證使用者輸入-2》的情境,來介紹jQuery Validation常用的驗證規則,包含如何使用程式設定驗證規則與錯誤訊息,以及常用的email、url、digits等驗證規則,並討論如何驗證下拉式清單方塊、圓型按鈕(RadioButton)與核取方塊(checkbox)的值。

email/url驗證規則

若資料要符合電子郵件或網站的網址的格式,可以使用「email」與「url」規則,參考以下範例程式碼,設定輸入電子郵件的INPUT(txtEmail)項目,不可以為空白,且需符合電子郵件格式;以及設定輸入個人網站網址的INPUT(txtUrl)項目,不可以為空白,且需符合URL格式:

 

 

網頁執行時,當電子郵件格式不對時,將顯示以下錯誤資訊,請參考下圖所示:

clip_image002

圖 1:電子郵件信箱格式驗證。

網頁執行時,當URL格式不對時,將顯示以下錯誤資訊,請參考下圖所示:

clip_image004

圖 2:URL格式驗證。

使用digits驗證數值資料

若要驗證文字方塊中輸入的內容是數字不是文字,可以使用jQuery Validation套件的「digits」規則進行檢查。參考以下範例程式碼,設定輸入行動電話號碼的INPUT(txtPhone)項目,不可以為空白,且只能輸入數字,不可以輸入文字;

 
<!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="txtPhone" id="lblPhone"> 行動電話 </label>
            <input name="txtPhone" type="text" id="txtPhone" />
            <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: {
                    txtPhone: {
                        required: true,
                        digits: true
                    }
                },
                messages: {
                    txtPhone: {
                        required: "電話號碼不可以為空白",
                        digits: "電話號碼只能是數字"
                    }
                }
            });
        });
    </script>
</body>
</html>

 

網頁執行時,當行動電話號碼輸入的資料包含文字時,將顯示以下錯誤資訊,請參考下圖所示:

clip_image006

圖 3:digits驗證規則。

驗證下拉式清單方塊

若下拉式清單方塊的項目必需要輸入,要驗證使用者是否選取下拉式清單方塊的選項,只要在程式中設定「required」規則即可。此外,你可以使用一個<option>項目,顯示輸入提示,並且將其value設為空白,代表此值是不合法的,參考以下範例程式碼:

<!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="ddlNationality" id="lblNationality"> 國籍 </label>
            <select name="ddlNationality" id="ddlNationality">
                <option value=""> 未選擇 </option>
                <option value="國內"> 國內 </option>
                <option value="國外人士"> 國外人士 </option>
            </select>
            <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: {
                    ddlNationality: {
                        required: true
                    }
                },
                messages: {

                    ddlNationality: {
                        required: "請選擇一個項目"
                    }
                }
            });
        });
    </script>
</body>
</html>

網頁執行時,當國籍資料未選取時,將顯示以下錯誤資訊,請參考下圖所示:

clip_image008

圖 4:驗證下拉式清單方塊。

驗證圓型按鈕(RadioButton)

圓型按鈕通常應用在從一群資料中做單選的功能,例如血型、性別等等。參考以下範例程式碼,使用兩個圓型按鈕讓使用者輸入性別,並檢查性別的欄位一定要輸入:

<!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 />
            <div class="parent">
                <label for="rdoGender" id="lblGender"> 性別 </label>
                <label><input type='radio' name='rdoGender' value='Female' />女</label>
                <label><input type='radio' name='rdoGender' value='Male' />男</label>
            </div>
            <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: {

                    rdoGender: {
                        required: true
                    }
                },
                messages: {

                    rdoGender: {
                        required: "性別不可以為空白"
                    }
                }
            });
        });
    </script>
</body>
</html>

 

網頁執行時,當國性別資料未選取時,將顯示以下錯誤資訊,但是錯誤訊息的位置緊臨在第一個圓型按鈕的右方,請參考下圖所示:

clip_image010

圖 5:預設錯誤訊息出現的位置。

我們可以利用errorPlacement來設定錯誤訊息要出現的位置。參考以下範例程式碼,將圓型按鈕包裝在一個套用「class="parent"」的<div>標籤之中。再利用程式碼,從errorPlacement回呼函式的第二個參數,可以取得目前要驗證的HTML項目,叫用is()方法判斷此項目是否是圓型按鈕(radio)或核取方塊,(checkbox),接著將顯示錯誤訊息的error項目,附加在套用「class="parent"」的<div>標籤之中:

<!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 />
            <div class="parent">
                <label for="rdoGender" id="lblGender"> 性別 </label>
                <label><input type='radio' name='rdoGender' value='Female' />女</label>
                <label><input type='radio' name='rdoGender' value='Male' />男</label>
            </div>
            <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: {

                    rdoGender: {
                        required: true
                    }
                },
                messages: {

                    rdoGender: {
                        required: "姓別不可以為空白"
                    }
                },
                errorPlacement: function (error, element) {
                    if (element.is(":radio") || element.is(":checkbox")) {
                        error.appendTo(element.parents(".parent"));
                    }
                    else {
                        error.insertAfter(element);
                    }
                }
            });
        });
    </script>
    <!--<script>
</body>
</html>

 

這樣就可以變更預設錯誤訊息出現的位置,讓錯誤訊息呈現在最後一個圓型按鈕的右側,請參考下圖所示:

clip_image012

圖 6:變更錯誤訊息的位置。

核取方塊驗證(Checkbox)

核取方塊(checkbox)通常應用在從一群資料中做多選的功能,例如興趣、資訊來源等等。核取方塊(checkbox)的驗證和圓型按鈕類似,預設錯誤訊息的位置可能不如預期,因此你可以利用errorPlacement來設定錯誤訊息要出現的位置。

參考以下範例程式碼,檢查興趣的欄位一定要輸入,並透過「minlength」規則設定興趣至少要選兩個。設計時將核取方塊標籤包裝在一個套用「class="parent"」的<div>標籤之中。再利用程式碼,從errorPlacement回呼函式的第二個參數可以取得目前要驗證的HTML項目,叫用is()方法判斷此項目是否是圓型按鈕(radio)或核取方塊,(checkbox),接著將顯示錯誤訊息的error項目,附加在套用「class="parent"」的<div>標籤之中:

 

<!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 />
            <div class="parent">
                <label for="chkInterest[]" id="lblInterest">興趣</label>
                <label><input type='checkbox' name='chkInterest[]' value='游泳' /> 游泳 </label>
                <label><input type='checkbox' name='chkInterest[]' value='爬山' /> 爬山 </label>
                <label><input type='checkbox' name='chkInterest[]' value='睡覺' /> 睡覺 </label>
            </div>
            <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: {
                    "chkInterest[]": {
                        required: true,
                        minlength: 2
                    }
                },
                messages: {
                    "chkInterest[]": {
                        minlength: jQuery.validator.format("最少要選{0}種興趣")
                    }
                },
                errorPlacement: function (error, element) {
                    if (element.is(":radio") || element.is(":checkbox")) {
                        error.appendTo(element.parents(".parent"));
                    }
                    else {
                        error.insertAfter(element);
                    }
                }
            });
        });
    </script>
</body>
</html>

網頁執行時,當興趣資料未選取2個時,將顯示以下錯誤資訊,請參考下圖所示:

clip_image014

圖 7:驗證checkbox至少要選兩個。

若未選取任何興趣時,將顯示以下錯誤資訊,請參考下圖所示:

clip_image016

圖 8:驗證checkbox一定要選取。

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