jquery-validate 外掛

作用：表單校驗

一般寫法：直接寫到表單的資料輸入的地方

 1 <form id="loginForm" name='f' action='/auth/login' method='POST'>
 2     <div class="el-form-item">
 3         <input type="text" name='username' id="username" placeholder="使用者名稱" class="el-input" required>
 4     </div>
 5     <div class
 
="el-form-item">
 6         <input type="password" name='password' id="password" placeholder="密碼" class="el-input" required>
 7     </div>
 8     <div class="login-btn">
 9         <button type="submit" class="el-button">登入</button>
10     </div>
11 </form>

required表示必填項，每次輸入框失去焦點或者觸發keyup事件時都會進行校驗。

進階寫法（推薦）：

將校驗規則統一寫在js裡，這樣規則和提示可以一一對應起來。

html:

 1 <form id="loginForm" name='f' action='/auth/login' method='POST'>
 2     <div class="el-form-item">
 3         <input type="text" name='username' id="username" placeholder="使用者名稱" class="el-input">
 4     </div>
 5     <div class
 
="el-form-item">
 6         <input type="password" name='password' id="password" placeholder="密碼" class="el-input">
 7     </div>
 8     <div class="login-btn">
 9         <button type="submit" class="el-button">登入</button>
10     </div>
11 </form>

js:

 1 $("#loginForm").validate({
 2     rules:{
 3         username:"required",
 4         password:"required",
 5     },
 6     messages:{
 7         username:"請輸入您的使用者名稱",
 8         password:"請輸入您的密碼",
 9     }
10 });

rules裡面常用的驗證方法有：

　　1、required：必填。

　　2、minlength(length)、maxlength(length)、rangelength(range)：設定最小長度、最大長度和長度範圍[min,max]。

　　3、min(value)、max(value)、range(range)：設定最小值、最大值和值的範圍。

　　4、email()：驗證電子郵箱的格式。

　　5、url()：驗證url格式。

　　6、date()：驗證日期格式。

　　7、number()：驗證十進位制數字。

　　8、digits()；驗證整數。

　　9、equalTo(other)：驗證兩個輸入框的內容是否相同。

錯誤資訊

　　預設情況在校驗失敗時會建立calss為error的label標籤存放錯誤提示資訊，並放在當前校驗控制元件的後面，即

error.appendTo(element.parent());

　　如果要自定義顯示位置的話可以使用 errorPlacement：callBack修改

   errorPlacement: function(error, element) {  
       //error為校驗失敗建立的資訊提示標籤，element為當前校驗控制元件  
   }

• errorClass 可以指定標籤類名。
• errorElement 可以指定標籤型別。
• errorLabelContainer 可以把錯題資訊統一放在一個容器裡。
• wrapper 用什麼標籤再把上邊的 errorELement 包起來。
• 關於樣式的修改，校驗失敗當前校驗控制元件也會新增error類名，所以可以定義input.error和label.error的樣式。

校驗成功資訊顯示：

　　校驗成功可以設定success:"className"來設定樣式，也可以在success後接一個函式為校驗成功後的操作。

 1      $("#loginForm").validate({
 2         rules:{
 3             username:"required",
 4             password:"required",
 5         },
 6         messages:{
 7             username:"請輸入您的使用者名稱",
 8             password:"請輸入您的密碼",
 9         }
10          success: "valid"
11     });

新增自定義校驗資訊：

　　使用addMethod(name,method,message)新增自定義校驗，三個引數分別為：自定義校驗的名稱、方法、提示資訊。在 additional-methods.js 檔案中存在一些擴充套件的自定義校驗方法，如notEqualTo（不同於）等。

   jQuery.validator.addMethod( "notEqualTo", function( value, element, param ) {
       return this.optional(element) || !$.validator.methods.equalTo.call( this, value, element, param );
   }, "Please enter a different value, values must not be the same." );

• method的三個引數分別為： 校驗控制元件中的value值、校驗控制元件元素、呼叫此校驗方法中的引數（如equalTo("#newPassword")，param為“#newPassword”）。
• this.optional(element)用於表單控制元件的值不為空時才觸發驗證。當表單的值為空時，this.optional(element) == true，即可以不填但是格式不能錯的場景。
• method返回值true為驗證成功，false為驗證失敗。

使用普通按鈕代替submit提交

很多時候我們提交表單並不是用的form形式，而是ajax，這時候就不能用submit來觸發了。
validator()會返回一個物件，這個物件下的form()方法可以驗證 form 返回成功還是失敗。

 1 function validform(){
 2         return $("#changePasswordForm").validate({
 3             rules:{
 4                 oldPassword:"required",
 5                 newPassword:{
 6                     required:true,
 7                     notEqualTo:"#oldPassword"
 8                 },
 9                 newPassword2:{
10                     required:true,
11                     equalTo:"#newPassword"
12                 },
13             },
14             messages:{
15                 oldPassword:"原密碼不能為空",
16                 newPassword:{
17                     required:"新密碼不能為空",
18                     notEqualTo:"新密碼不能與原密碼重複"
19                 },
20                 newPassword2:{
21                     required:"請確認新密碼",
22                     equalTo:"兩次密碼輸入不一致"
23                 },
24             }
25         });
26     }
27     //登錄檔單驗證
28     $(validform());
29 
30     //點選按鈕事件
31     $("#submitBtn").click(function(){
32         if (validform().form()) {
33             //請求ajax
34             ajaxSubmit();
35         }else{}
36     });

ps：

• 有時候會遇到form表單中按鈕點選時自動執行表單提交操作的問題，或者點選form中的按鈕請求ajax，可是自動在url後拼了一段奇怪的字串導致請求status為cancel。
• 原因是沒有給button按鈕規定 type 屬性。
• button按鈕如果沒有指定type屬性的話，Internet Explorer 的預設型別是 "button"，而其他瀏覽器中（包括 W3C 規範）的預設值是 "submit"。