jquery.validate手動調用校驗,便於ajax請求

jquery.validate手動調用校驗,方便ajax請求

原創 2016年11月10日 17:36:14

• 標籤：
• validate /
• jquery /
• ajax

jquery.validate是一個非常方便的前端校驗插件，在submit提交時會自動校驗，並給出提示，如果校驗不通過，則阻止提交。但是如果需要ajax方式進行後臺請求，則需要手動調用validate進行校驗判斷，具體方式如下：

代碼塊(依賴jquery框架)

1.初始化校驗：

 $(function () {
           //表單校驗，queryForm爲表單id
            $('#queryForm').validate({
                errorElement:"em",
                errorClass:"red",
                rules: {
                    userName: {required: true}//userName爲input框id
                },
                messages: {
                    companyId: {
                        required: "請輸入用戶名稱"
                    }
                }
            });
        });

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15

2.調用方式，調用valid()方法

校驗通過則返回true,不通過則false：

//提交方法
function pageSubmit() {
     if (! $("#queryForm").valid()) {
        return;
     }
    var data = $("#queryForm").serializeArray();
    $.ajax({
      url: "test.html",
      data: data,
      success: function(html){
        $("#result").append(html);
      }
   

3.html代碼示例

 <form id="queryForm">
     <input type="text" name="userName" id="userName"/>
     <button type="button" id="btn-query" onclick="pageSubmit()">提交</button>
 </form>

• 1
• 2
• 3
• 4

通過上述方式則可以靈活控制校驗的位置。
附上插件下載地址http://download.csdn.net/download/hanfei0000cool/9679278