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

by vivid 10. 八月 2016 17:17

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

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

jQuery Validation是一個非常簡易的套件,以jQuery為基礎,讓網站程式用戶端(瀏覽器)驗證的程式變得非常的簡單,不需要寫太多驗證的程式碼,就可以做到一些常見的驗證邏輯,像是驗證資料一定要輸入、欄位不能為空白,檢查電子郵件或網站網址格式是否正確…等等,大幅降低撰寫程式碼的時間。你可以在各種網頁程式中使用它們,例如HTML、ASP.NET、PHP…等等,本系列文章將陸續介紹一些jQuery Validation常用的驗證規則。

 

下載jQuery Validation套件

要在網站程式使用到jQuery Validation進行資料驗證的第一步便是取得套件,你可以從官網首頁的超連結,直接下載套件,官網網址在:「https://jqueryvalidation.org/」,請參考下圖所示:

clip_image002

圖 1:下載jQuery Validation套件。

若使用Visual Studio 2015工具開發,可以利用Nuget 套件管理員下載。在Visual Studio 2015「Solution Explorer」視窗選取專案名稱。從Visual Studio 2015開發工具「Tools」-「NuGet Package Manager」-「Package Manager Console」開啟「Package Manager Console」視窗,然後在提示字元中輸入install-package指令,並使用「-version」參數,指定安裝jQuery.Validation 1.15.0版本:

Install-Package jQuery.Validation -Version 1.15.0

接著更新一下jQuery的版本,在「Package Manager Console」視窗,然後在提示字元中輸入「install-package」指令,並使用「-version」參數,指定安裝jQuery 3.1.0版本:

Update-Package jQuery -Version 3.1.0

上述的安裝步驟也可以改用視覺化的介面來安裝,自主Visual Studio 2015「Solution Explorer」視窗,選取網站名稱,按滑鼠右鍵,選取「Manage NuGet Packages」項目,請選取「NuGet Packages Manager」視窗左上方的「Browse」選項,在文字方塊中,可以輸入「jQuery.Validation」當作篩選條件,找出套件之後,只要從右方Version下拉式清單選取版本,然後按下旁邊的「Install」按鈕安裝,請參考下圖所示:

clip_image004

圖 2:使用「NuGet Packages Manager」下載jQuery Validation套件。

接著更新jQuery的版本,請參考下圖所示:

clip_image006

圖 3:更新jQuery套件版本。

會員註冊

我們先來看一個沒有加上jQuery Validation套件的會員註冊網頁,這個網頁中的使用者帳號、密碼與確認密碼加上HTML5的required Attribute,要求資料不可不填,請參考下列程式碼:

<!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"
               required ="" />

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

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

        <input type="submit"
               name="btnRegister"
               value="註冊"
               id="btnRegister" />
      </fieldset>
    </form>
  </body>
</html>

網頁執行時,當資料驗證有問題時,便不讓你提交資料到伺服端,預設每個不同的瀏覽器會有自己的錯誤訊息,例如在Chrome瀏覽器中,可以看看到顯示以下錯誤資訊,請參考下圖所示:

clip_image008

圖 4:在Chrome瀏覽器中顯示的驗證錯誤資訊。

若是使用IE瀏覽器則看到以下錯誤訊息,請參考下圖所示:

clip_image010

圖 5:在IE瀏覽器中顯示的驗證錯誤資訊。

加上jQuery Validate套件進行驗證

接著讓我們加上jQuery Validate套件進行驗證看看,只要在HTML網頁中,使用<Script>標籤先引用jQuery,再引用jQuery Validate套件,接著再加上一段程式碼,利用ID選取器,選取網頁中的表單(form1),叫用validate() 方法進行表單驗證,請參考下列程式碼:

<!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"
               required="" />

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

        <label for="txtComfirmPwd"
               id="lblComfirmPwd"> 確認密碼 </label>
        <input name="txtComfirmPwd"
               type="password"
               id="txtComfirmPwd"
               required="" />
        <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>
        $(function () {
            $("#form1").validate();
        });
    </script>
</body>
</html>

 

這次執行網頁,當使用者帳號、密碼、確認密碼資料都未輸入的情況下,提交表單進行註冊的動作時,就會自動在文字方塊後方顯示錯誤訊息,請參考下圖所示:

clip_image012

圖 6:使用jQuery Validate套件驗證顯示錯誤訊息。

若是使用IE瀏覽器則看到以下錯誤訊息,請參考下圖所示:

clip_image014

圖 7:在IE瀏覽器中顯示的jQuery Validate套件驗證錯誤資訊。

錯誤訊息中文化

預設的錯誤訊息是英文,但jQuery Validation套件提供中文化的JavaScript檔案,只要解壓縮從官網下載下來的壓縮檔,從「jquery-validation-1.15.0\dist\localization」資料夾中,可以找到兩個檔案:

· messages_zh_TW.js:供開發階段使用,程式有排版。

· messages_zh_TW.min.js:供上線階段使用,程式無排版。

讓我們修改原來的程式碼,在HTML網頁中引用jQuery Validation套件程式碼的<Script>標籤下一行,引用中文化套件檔案,請參考下列程式碼:

<!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"
            required="" />

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

            <label for="txtComfirmPwd"
                   id="lblComfirmPwd"> 確認密碼 </label>
            <input name="txtComfirmPwd"
                   type="password"
                   id="txtComfirmPwd"
                   required="" />
            <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();
        });
    </script>
</body>
</html>

 

這次執行網頁,當使用者帳號、密碼、確認密碼資料都未輸入的情況下提交表單進行註冊的動作,就會自動在文字方塊後方顯示「必須填寫」的中文錯誤訊息,請參考下圖所示:

clip_image016

圖 8:顯示中文化錯誤訊息。

若想客製化這些錯誤訊息,可以直接修改messages_zh_TW.js或messages_zh_TW.min.js檔案中的程式碼,請參考下列messages_zh_TW.js程式碼列表:

 

(function( factory ) {
    if ( typeof define === "function" && define.amd ) {
        define( ["jquery", "../jquery.validate"], factory );
    } else if (typeof module === "object" && module.exports) {
        module.exports = factory( require( "jquery" ) );
    } else {
        factory( jQuery );
    }
}(function( $ ) {

/*
* Translated default messages for the jQuery validation plugin.
* Locale: ZH (Chinese; 中文 (Zhōngwén), 汉语, 漢語)
* Region: TW (Taiwan)
*/
$.extend( $.validator.messages, {
    required: "必須填寫",
    remote: "請修正此欄位",
    email: "請輸入有效的電子郵件",
    url: "請輸入有效的網址",
    date: "請輸入有效的日期",
    dateISO: "請輸入有效的日期 (YYYY-MM-DD)",
    number: "請輸入正確的數值",
    digits: "只可輸入數字",
    creditcard: "請輸入有效的信用卡號碼",
    equalTo: "請重複輸入一次",
    extension: "請輸入有效的後綴",
    maxlength: $.validator.format( "最多 {0} 個字" ),
    minlength: $.validator.format( "最少 {0} 個字" ),
    rangelength: $.validator.format( "請輸入長度為 {0} 至 {1} 之間的字串" ),
    range: $.validator.format( "請輸入 {0} 至 {1} 之間的數值" ),
    max: $.validator.format( "請輸入不大於 {0} 的數值" ),
    min: $.validator.format( "請輸入不小於 {0} 的數值" )
} );

}));

 

使用data-attribute設定錯誤訊息

另一個提供錯誤訊息的做法是透過HTML項目的data-attribute。以下範例程式碼使用「data-msg」來設定「required」規則的錯誤訊息為「必要項,必需輸入」,請參考下列程式碼:

<!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" required data-msg="必要項,必需輸入" />

            <br />
            <label for="txtPwd" id="lblPwd"> 密碼 </label>
            <input name="txtPwd" type="password" id="txtPwd" required data-msg="必要項,必需輸入" />
            <br />

            <label for="txtComfirmPwd" id="lblComfirmPwd">確認密碼</label>
            <input name="txtComfirmPwd" type="password" id="txtComfirmPwd" required data-msg="必要項,必需輸入" />
            <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>
        $(function () {
            $("#form1").validate();
        });
    </script>
</body>
</html>

 

 

執行網頁,當使用者帳號、密碼、確認密碼資料都未輸入的情況下提交表單進行註冊的動作,就會自動在文字方塊後方顯示「必要項,必需輸入」錯誤訊息,請參考下圖所示:

clip_image018

圖 9:使用data-attribute設定錯誤訊息。

使用title設定錯誤訊息

你也可以使用HTML項目的title來設定自訂的錯誤訊息,例如修改上述的程式碼,將data-attribute換成title,請參考下列程式碼:

<!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" required title="必要項,必需輸入" />

            <br />
            <label for="txtPwd" id="lblPwd"> 密碼 </label>
            <input name="txtPwd" type="password" id="txtPwd" required title="必要項,必需輸入" />
            <br />

            <label for="txtComfirmPwd" id="lblComfirmPwd">確認密碼</label>
            <input name="txtComfirmPwd" type="password" id="txtComfirmPwd" required title="必要項,必需輸入" />
            <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>
        $(function () {
            $("#form1").validate();
        });
    </script>
</body>
</html>

 

執行網頁,當使用者帳號、密碼、確認密碼資料都未輸入的情況下提交表單進行註冊的動作,就會自動在文字方塊後方顯示定義在title的「必要項,必需輸入」錯誤訊息,請參考下圖所示:

clip_image019

圖 10:使用data-attribute設定錯誤訊息。

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