jquery.validate手动调用校验,方便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: "请输入用户名称"
                    }
                }
            });
        });

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>

通过上述方式则可以灵活控制校验的位置。
附上插件下载地址http://download.csdn.net/download/hanfei0000cool/9679278

你可能感兴趣的:(js工具类)