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