相信很多coder在表單驗證這塊都是自己寫驗證規則的，今天我們用jQuery Validate這款前端驗證利器來寫一個簡單的應用。
可以先把我寫的這個小demo運行試下，先睹為快。猛戳鏈接--》，http://pan.baidu.com/s/1o8zVdoQ
1.Demo講解（validate參數見第3點）
1.1 Validate 要依賴jQuery的，所以HTML中js的引用關系如下：
<script type="text/javascript" src="../js/common/jquery-1.11.0.js" ></script>
<script type="text/javascript" src="../js/common/jquery-validation-1.14.0/jquery.validate.min.js" ></script>
<script type="text/javascript" src="../js/common/jquery-validation-1.14.0/additional-methods-common.js" ></script>
<script src="../js/controller/blog-validate.js" type="text/javascript" charset="utf-8"></script>
第一個就不用說了，第二個是驗證插件（必須引用），第三個是自定義驗證規則，第四個我們自己的js
1.2 注冊form的結構：
<form class="am-form am-form-horizontal yf-form-tips add-form"> <div class="am-form-group am-g-collapse"> <label for="addFormName" class="am-u-sm-2 am-form-label">用戶名: </label> <div class="am-u-sm-10 yf-pl10"> <input type="text" id="" name="addFormName" placeholder="請輸入您的用戶名" class="" maxlength="20"> <span class="yf-error-tip"></span> </div> </div> <div class="am-form-group am-g-collapse"> <label for="addFormName" class="am-u-sm-2 am-form-label">密碼: </label> <div class="am-u-sm-10 yf-pl10"> <input type="password" id="password1" name="addFormPass1" placeholder="請輸入您的密碼" class="" maxlength="20"> <span class="yf-error-tip"></span> </div> </div> <div class="am-form-group am-g-collapse"> <label for="addFormName" class="am-u-sm-2 am-form-label">確認密碼: </label> <div class="am-u-sm-10 yf-pl10"> <input type="password" id="" name="addFormPass2" placeholder="請再次輸入您的密碼" class="" maxlength="20"> <span class="yf-error-tip"></span> </div> </div> <div class="am-form-group am-g-collapse"> <label for="addFormPhone" class="am-u-sm-2 am-form-label">手機號: </label> <div class="am-u-sm-10 yf-pl10"> <input type="text" id="" name="addFormPhone" placeholder="請輸入您的手機號" class="" maxlength="11"> <span class="yf-error-tip"></span> </div> </div> <div class="am-form-group am-g-collapse"> <label for="addFormAdd" class="am-u-sm-2 am-form-label am-vertical-align-top yf-pt0">聯系地址: </label> <div class="am-u-sm-10 yf-pl10"> <textarea id="" placeholder="請輸入您的聯系地址" name="addFormAdd" class="" maxlength="100"></textarea> <span class="yf-error-tip"></span> </div> </div> <div class="am-form-group am-g-collapse"> <div class="am-u-sm-offset-2 yf-pl10"> <button type="submit" class="am-btn am-btn-primary" onclick="submitInfo()">提交</button> </div> </div> </form>
1.3 主要的js(blog-validate.js)：
//表單驗證規則 var formValid = $(".add-form").validate({ rules: { "addFormName":{ "required":true, //必填字段 }, "addFormPass1":{ "required":true }, "addFormPass2":{ "required":true, "equalTo": "#password1" //輸入值必須和 #password1 相同 }, "addFormPhone":{ "required":true, "digits":true, //必須輸入整數 "minlength":11 //輸入長度最小是 11 }, "addFormAdd":{ "required":true } }, messages: { "addFormName":{ "required":"用戶名不能為空哦" }, "addFormPass1":{ "required":"密碼不能為空哦" }, "addFormPass2":{ "required":"確認密碼不能為空哦", "equalTo":"兩次輸入的密碼不一致哦" }, "addFormPhone":{ "required":"手機號不能為空哦", "digits":"手機號格式不正確哦", "minlength":"手機號格式不正確哦", }, "addFormAdd":{ "required":"地址不能為空哦" } }, errorPlacement:function(error,element) { error.appendTo(element.siblings(".yf-error-tip")); } }); //提交前開始驗證 var submitInfo = function(){ if($('.add-form').valid()){ alert('恭喜你，驗證通過了！'); }; }
說明：
主要通過 $('.add-form').valid() 觸發驗證；
提示信息可在 errorPlacement 中配置放置的位置，提示默認的樣式是"error"，如需修改，參考validate ()可選項中的"errorClass"
2.有幾個特別要注意的地方：
- validate ()的對象$(".add-form")對應的DOM標簽必須是form標簽
- 執行$(".add-form").validate 時，form在HTML結構中是存在的，類似jquery的remove之后或者angularJs的ngIf，都會導致驗證失敗
- validate ()的屬性"rules"必須對應驗證表單中標簽的name屬性
- 驗證規則可以直接寫在HTML中（不推薦，提示信息也不好處理），比如：
<input type="text" id="" name="addFormName" placeholder="請輸入您的用戶名" class="" maxlength="20" required minlength='2'>
3.Validate官方標准
3.1 Validate的默認校驗規則
| 名稱 | 返回類型 | 描述 |
|---|---|---|
| required() | Boolean | 必填驗證元素。 |
| required(dependency-expression) | Boolean | 必填元素依賴於表達式的結果。 |
| required(dependency-callback) | Boolean | 必填元素依賴於回調函數的結果。 |
| remote(url) | Boolean | 請求遠程校驗。url 通常是一個遠程調用方法。 |
| minlength(length) | Boolean | 設置最小長度。 |
| maxlength(length) | Boolean | 設置最大長度。 |
| rangelength(range) | Boolean | 設置一個長度范圍 [min,max]。 |
| min(value) | Boolean | 設置最小值。 |
| max(value) | Boolean | 設置最大值。 |
| email() | Boolean | 驗證電子郵箱格式。 |
| range(range) | Boolean | 設置值的范圍。 |
| url() | Boolean | 驗證 URL 格式。 |
| date() | Boolean | 驗證日期格式（類似 30/30/2008 的格式，不驗證日期准確性只驗證格式）。 |
| dateISO() | Boolean | 驗證 ISO 類型的日期格式。 |
| dateDE() | Boolean | 驗證德式的日期格式（29.04.1994 或 1.1.2006）。 |
| number() | Boolean | 驗證十進制數字（包括小數的）。 |
| digits() | Boolean | 驗證整數。 |
| creditcard() | Boolean | 驗證信用卡號。 |
| accept(extension) | Boolean | 驗證相同后綴名的字符串。 |
| equalTo(other) | Boolean | 驗證兩個輸入框的內容是否相同。 |
| phoneUS() | Boolean | 驗證美式的電話號碼 |
3.2 validate ()的可選項
| 描述 |
代碼 |
| debug：進行調試模式（表單不提交）。 |
$(".selector").validate({ debug:true}) |
| 把調試設置為默認。 |
$.validator.setDefaults({ debug:true}) |
| submitHandler：通過驗證后運行的函數，里面要加上表單提交的函數，否則表單不會提交。 |
$(".selector").validate({ submitHandler:function(form) { $(form).ajaxSubmit(); }}) |
| ignore：對某些元素不進行驗證。 |
$("#myform").validate({ ignore:".ignore"}) |
| rules：自定義規則，key:value 的形式，key 是要驗證的元素，value 可以是字符串或對象。 |
$(".selector").validate({ rules:{ name:"required", email:{ required:true, email:true } }}) |
| messages：自定義的提示信息，key:value 的形式，key 是要驗證的元素，value 可以是字符串或函數。 |
$(".selector").validate({ rules:{ name:"required", email:{ required:true, email:true } }, messages:{ name:"Name不能為空", email:{ required:"E-mail不能為空", email:"E-mail地址不正確" } }}) |
| groups：對一組元素的驗證，用一個錯誤提示，用 errorPlacement 控制把出錯信息放在哪里。 |
$("#myform").validate({ groups:{ username:"fname lname" }, errorPlacement:function(error,element) { if (element.attr("name") == "fname" || element.attr("name") == "lname") error.insertAfter("#lastname"); else error.insertAfter(element); }, debug:true}) |
| OnSubmit：類型 Boolean，默認 true，指定是否提交時驗證。 |
$(".selector").validate({ onsubmit:false}) |
| onfocusout：類型 Boolean，默認 true，指定是否在獲取焦點時驗證。 |
$(".selector").validate({ onfocusout:false}) |
| onkeyup：類型 Boolean，默認 true，指定是否在敲擊鍵盤時驗證。 |
$(".selector").validate({ onkeyup:false}) |
| onclick：類型 Boolean，默認 true，指定是否在鼠標點擊時驗證（一般驗證 checkbox、radiobox）。 |
$(".selector").validate({ onclick:false}) |
| focusInvalid：類型 Boolean，默認 true。提交表單后，未通過驗證的表單（第一個或提交之前獲得焦點的未通過驗證的表單）會獲得焦點。 |
$(".selector").validate({ focusInvalid:false}) |
| focusCleanup：類型 Boolean，默認 false。當未通過驗證的元素獲得焦點時，移除錯誤提示（避免和 focusInvalid 一起使用）。 |
$(".selector").validate({ focusCleanup:true}) |
| errorClass：類型 String，默認 "error"。指定錯誤提示的 css 類名，可以自定義錯誤提示的樣式。 |
$(".selector").validate({ errorClass:"invalid"}) |
| errorElement：類型 String，默認 "label"。指定使用什么標簽標記錯誤。 |
$(".selector").validate errorElement:"em"}) |
| wrapper：類型 String，指定使用什么標簽再把上邊的 errorELement 包起來。 |
$(".selector").validate({ wrapper:"li"}) |
| errorLabelContainer：類型 Selector，把錯誤信息統一放在一個容器里面。 |
$("#myform").validate({ errorLabelContainer:"#messageBox", wrapper:"li", submitHandler:function() { alert("Submitted!") }}) |
| showErrors：跟一個函數，可以顯示總共有多少個未通過驗證的元素。 |
$(".selector").validate({ showErrors:function(errorMap,errorList) { $("#summary").html("Your form contains " + this.numberOfInvalids() + " errors,see details below."); this.defaultShowErrors(); }}) |
| errorPlacement：跟一個函數，可以自定義錯誤放到哪里。 |
$("#myform").validate({ errorPlacement:function(error,element) { error.appendTo(element.parent("td").next("td")); }, debug:true}) |
| success：要驗證的元素通過驗證后的動作，如果跟一個字符串，會當作一個 css 類，也可跟一個函數。 |
$("#myform").validate({ success:"valid", submitHandler:function() { alert("Submitted!") }}) |
| highlight：可以給未通過驗證的元素加效果、閃爍等。 |
|
更多的用法講解，大家可以參考validate官網，或者菜鳥教程。