【jQuery】學習jQuery外掛程式的使用與寫法（表單驗證外掛程式-validation）

標籤：message   extend   name   alt   class   turn   require   strong   .com   

最新最全的外掛程式可以從jQuery官方網站的擴充卡塊下載，網站地址為：http://plugins.jquery.com/

Validation優點：內建驗證規則；自訂驗證規則；簡單強大的驗證資訊提示；即時驗證。

三種不同的寫法

1.1 確認哪個表單需要被驗證，引入jquery.validate.js外掛程式

<script type="text/javascript">$(document).ready(function(){    $("#commentForm").validate();/*確定哪個表單需要被驗證；*/});</script>

1.2 針對不同欄位，進行驗證規則編碼，設定欄位相應的屬性

 <form class="cmxform" id="commentForm" method="get" action=""> <fieldset>   <legend>一個簡單的驗證帶驗證提示的評論例子</legend>   <p>     <label for="cusername">姓名</label>     <em>*</em><input id="cusername" name="username" size="25" class="required" minlength="2" /><!--必須填寫，最小長度-->   </p>   <p>     <label for="cemail">電子郵件</label>     <em>*</em><input id="cemail" name="email" size="25"  class="required email" />   </p>   <p>     <label for="curl">網址</label>     <em>  </em><input id="curl" name="url" size="25"  class="url" value="" /><!--url格式驗證-->   </p>   <p>     <label for="ccomment">你的評論</label>     <em>*</em><textarea id="ccomment" name="comment" cols="22"  class="required"></textarea>   </p>   <p>     <input class="submit" type="submit" value="提交"/>   </p> </fieldset> </form>

2.1 再引入jquery.metadata.js外掛程式（支援固定格式解析的jQuery外掛程式）後可以採用不同的寫法

  <script type="text/javascript">  $(document).ready(function(){        $("#commentForm").validate({meta: "validate"});  });  </script>

2.2 效果與1.2相同，寫法不同而已

 <form class="cmxform" id="commentForm" method="get" action=""> <fieldset>   <legend>一個簡單的驗證帶驗證提示的評論例子</legend>   <p>     <label for="cusername">姓名</label>     <em>*</em><input id="cusername" name="username" size="25"  class="{validate:{required:true, minlength:2}}" />   </p>   <p>     <label for="cemail">電子郵件</label>     <em>*</em><input id="cemail" name="email" size="25"   class="{validate:{required:true, email:true}}"  />   </p>   <p>     <label for="curl">網址</label>     <em>  </em><input id="curl" name="url" size="25"  value=""   class="{validate:{url:true}}" />   </p>   <p>     <label for="ccomment">你的評論</label>     <em>*</em><textarea id="ccomment" name="comment" cols="22"  class="{validate:{required:true}}" ></textarea>   </p>   <p>     <input class="submit" type="submit" value="提交"/>   </p> </fieldset> </form>

3.1 在$("#commentForm").validate（）方法中增加rules屬性

  <script type="text/javascript">  $(document).ready(function(){    $("#commentForm").validate({        rules: {            username: {                required: true,                minlength: 2            },            email: {                required: true,                email: true            },            url:"url",            comment: "required"        }      });  });  </script>

3.2 將欄位中的class屬性移除，通過name屬性匹配驗證規則

 <form class="cmxform" id="commentForm" method="get" action=""> <fieldset>   <legend>一個簡單的驗證帶驗證提示的評論例子</legend>   <p>     <label for="cusername">姓名</label>     <em>*</em><input id="cusername" name="username" size="25" />   </p>   <p>     <label for="cemail">電子郵件</label>     <em>*</em><input id="cemail" name="email" size="25"  />   </p>   <p>     <label for="curl">網址</label>     <em>  </em><input id="curl" name="url" size="25"  value="" />   </p>   <p>     <label for="ccomment">你的評論</label>     <em>*</em><textarea id="ccomment" name="comment" cols="22"></textarea>   </p>   <p>     <input class="submit" type="submit" value="提交"/>   </p> </fieldset> </form>

以上三種寫法的驗證結果如下

validation預設是提示英文，要顯示中文，可以引入jquery.validate.messages_cn.js，其內容如下

jQuery.extend(jQuery.validator.messages, {        required: "必選欄位",        remote: "請修正該欄位",        email: "請輸入正確格式的電子郵件",        url: "請輸入合法的網址",        date: "請輸入合法的日期",        dateISO: "請輸入合法的日期 (ISO).",        number: "請輸入合法的數字",        digits: "只能輸入整數",        creditcard: "請輸入合法的信用卡號",        equalTo: "請再次輸入相同的值",        accept: "請輸入擁有合法尾碼名的字串",        maxlength: jQuery.format("請輸入一個長度最多是 {0} 的字串"),        minlength: jQuery.format("請輸入一個長度最少是 {0} 的字串"),        rangelength: jQuery.format("請輸入一個長度介於 {0} 和 {1} 之間的字串"),        range: jQuery.format("請輸入一個介於 {0} 和 {1} 之間的值"),        max: jQuery.format("請輸入一個最大為 {0} 的值"),        min: jQuery.format("請輸入一個最小為 {0} 的值")});

此時提示結果為（中文，覆蓋了原來的英文提示）

還可以自訂驗證規則，如修改欄位提示資訊的class值，為驗證提示資訊添加圖片，增加“驗證碼”

程式中增加了messages屬性

  <script type="text/javascript">  $(document).ready(function(){    //自訂一個驗證方法    $.validator.addMethod(    "formula", //驗證方法名稱    function(value, element, param) {//驗證規則        return value == eval(param);    },     ‘請正確輸入數學公式計算後的結果‘//驗證提示資訊    );    $("#commentForm").validate({        rules: {            username: {                required: true,                minlength: 2            },            email: {                required: true,                email: true            },            url:"url",            comment: "required",            valcode: {                formula: "7+9"                }        },                messages: {            username: {                required: ‘請輸入姓名‘,                minlength: ‘請至少輸入兩個字元‘            },            email: {                required: ‘請輸入電子郵件‘,                email: ‘請檢查電子郵件的格式‘            },            url: ‘請檢查網址的格式‘,            comment: ‘請輸入您的評論‘        },                    errorElement: "em",                //用來建立錯誤提示資訊標籤        success: function(label) {            //驗證成功後的執行的回呼函數            //label指向上面那個錯誤提示資訊標籤em            label.text(" ")                //清空錯誤提示訊息                .addClass("success");    //加上自訂的success類        }      });  });  </script>

表單部分：

 <form class="cmxform" id="commentForm" method="get" action=""> <fieldset>   <legend>一個簡單的驗證帶驗證提示的評論例子</legend>   <p>     <label for="cusername">姓名</label>     <em>*</em><input id="cusername" name="username" size="25" />   </p>   <p>     <label for="cemail">電子郵件</label>     <em>*</em><input id="cemail" name="email" size="25"  />   </p>   <p>     <label for="curl">網址</label>     <em>  </em><input id="curl" name="url" size="25"  value="" />   </p>   <p>     <label for="ccomment">你的評論</label>     <em>*</em><textarea id="ccomment" name="comment" cols="22"></textarea>   </p>   <p>     <label for="cvalcode">驗證碼</label>     <input id="cvalcode" name="valcode" size="25"  value="" />=7+9   </p>   <p>     <input class="submit" type="submit" value="提交"/>   </p> </fieldset> </form>

在CSS中添加失敗和成功對應的小圖片

em { font-weight: bold; padding-right: 1em; vertical-align: top; }em.error {  background:url("images/unchecked.gif") no-repeat 0px 0px;  padding-left: 16px;}em.success {  background:url("images/checked.gif") no-repeat 0px 0px;  padding-left: 16px;}

提示結果如下

完整程式地址：https://github.com/yujihang/jQuery-Validation

【jQuery】學習jQuery外掛程式的使用與寫法（表單驗證外掛程式-validation）