简单介绍

官方文档地址:jQuery Validation Plugin | Form validation with jQuery


这个插件可以说非常有名了,主要功能是:表单的验证。在前台页面中,就可以完成大部分的字段校验功能,例如下图所示:


image.png


表单采用的是 bootstrap 样式,设置正确的校验规则,就可以显示如上所示的错误提示。


引入文件

下载对应的库或者通过 bower 包管理器安装插件


bower install jquery-validation --save


引入文件如下:


<!-- jquery.validate -->
<script src="/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="/jquery-validation/dist/localization/messages_zh.js"></script>


PS. 注意文件路径问题


HTML 部分

普通的 form 表单即可,上面图示的 HTML 代码如下:


<div class="form-group">
  <label for="startDate" class="control-label col-sm-2">日期</label>
  <div class="col-sm-5">
    <input type="text" class="form-control date" name="start_date" placeholder="开始日期" autocomplete="off"  required="true">
  </div>
  <div class="col-sm-5">
    <input type="text" class="form-control date" name="end_date" placeholder="结束日期" autocomplete="off"  required="true">
  </div>
</div>
<div class="form-group">
  <label for="place" class="control-label col-sm-2">地点</label>
  <div class="col-sm-5">
    <select class="form-control" name="city" required>
      <option value="">选择城市</option>
      <option value="北京">北京</option>
    </select>
  </div>
  <div class="col-sm-5">
    <select name="place" class="form-control" required>
      <option value="">选择地点</option>
    </select>
    <p class="help-block"><small>如没有,请<a href="#addPlaceModal" data-toggle="modal">添加地点</a></small></p>
  </div>
</div>
<div class="form-group">
  <label for="" class="control-label col-sm-2">负责人</label>
  <div class="col-sm-5">
    <input type="text" name="operator" class="form-control" required placeholder="运营负责人">
  </div>
  <div class="col-sm-5">
    <input type="text" name="owner" class="form-control" required placeholder="项目负责人">
  </div>
</div>
<div class="form-group">
  <label for="bz" class="control-label col-sm-2">备注</label>
  <div class="col-sm-10">
    <textarea name="p_bz" rows="2" class="form-control" placeholder="备注特殊信息"></textarea>
  </div>
</div>


JS 调用

前台 JS 调用很简单,直接调用 validate 函数即可,函数里传入一个参数对象,用来控制部分样式以及校验规则。


// 表单验证 addProject 结束日期要大于等于开始日期
$('#addProjectForm').validate({
  errorClass: 'text-danger',
  errorElement: 'em',
  rules: {
    end_date: {
      required: true,
      compareDate: 'input[name=start_date]'
    },
  },
  focusInvalid: false,
  messages: {
    end_date: {
      compareDate: '结束日期必须大于开始日期'
    }
  }
});


例如上述参数中:



自定义规则

也可以自定义规则,例如上述的 compareDate 规则,这样的话,需要自定义 compareDate 函数,如下:


// 自定义验证方法:结束日期 >= 开始日期
$.validator.methods.compareDate = function(value, element, param) {
    var startDate = jQuery(param).val();
    var date1 = new Date(Date.parse(startDate.replace("-", "/")));
    var date2 = new Date(Date.parse(value.replace("-", "/")));
    return date1 <= date2;
};


远程校验

远程校验就涉及到与后台的交互,看下注册功能的示例:


var $registerForm = $('#registerForm');
$registerForm.validate({
  errorClass: 'text-danger',
  errorElement: 'em',
  rules: {
    email: {
      remote: {
        url: '/register/checkEmail',
        type: 'get',
        dataType: 'json',
        data: {
          email: function () {
            return $('input[name=email]').val();
          }
        }
      }
    },
    repassword: {
      equalTo: 'input[name=password]'
    },

  },
  messages: {
    email: {
      remote: "邮箱已被注册",
    },
    repassword: {
      equalTo: "两次密码输入不一致"
    }
  }
});


前台传输 email 的值到后台,后台接收到值后做判断,然后返回 true 或 false,true 代表验证通过,false 代表验证失败。


异步提交

这个也是使用非常频繁的一个功能,使用 jquery-validation 插件就可以直接实现表单的异步提交,不用再另外添加代码去监听 submit 事件了。


例如,上面的注册表单验证参数中,再加上一个参数 submitHandler 即可,这里需要注意的是:参数 form 是 DOM 对象,而非 jQuery 对象。


submitHandler: function (form) {
  var data = $(form).serialize();
  $.post('/register', data , function(result, status){
    if(result.message == 'ok'){
      alert('注册成功,等待管理员审核');
      form.reset();
    }
  });
}


后台返回数据