jquery.validate手动调用校验,便于ajax请求

﹏ヽ暗。殇╰゛Y 2022-05-26 01:48 312阅读 0赞

# 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代码示例 ##

*  1
 *  2
 *  3
 *  4

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

[validate]: http://so.csdn.net/so/search/s.do?q=validate&t=blog
[jquery]: http://so.csdn.net/so/search/s.do?q=jquery&t=blog
[ajax]: http://so.csdn.net/so/search/s.do?q=ajax&t=blog
[http_download.csdn.net_download_hanfei0000cool_9679278]: http://download.csdn.net/download/hanfei0000cool/9679278