jquery-validate - 一款轻量级验证插件

Validate是基于jQuery的一款轻量级验证插件，内置丰富的验证规则，还有灵活的自定义规则接口，HTML、CSS与JS之间的低耦合能让您自由布局和丰富样式，支持input,select,textarea的验证。

Validate是基于jQuery的一款轻量级验证插件，内置丰富的验证规则，还有灵活的自定义规则接口，HTML、CSS与JS之间的低耦合能让您自由布局和丰富样式，支持input,select,textarea的验证。

浏览器支持：IE7+ 、Chrome、Firefox、Safari、Mobile Browser

jQuery版本：1.7.0+

使用方法

1、引用JS

<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript" src="jquery-validate.js"></script>

2、HTML代码

<div class="form_control">
<input class="required" value="" type="text" name="email" data-tip="请输入您的邮箱" data-valid="isNonEmpty||isEmail" data-error="email不能为空||邮箱格式不正确">
</div>
<div class="form_control">
<select class="required" data-valid="isNonEmpty" data-error="省份必填">
<option value="">请选择省份</option>
<option value="001">001</option>
<option value="002">002</option>
</select>
</div>

二、功能配置

• 给需要验证的表单元素的class填入required（不建议在这个class上做其他样式）。

• 建议input用独立div包裹，因为验证的message是从当前input的父元素上append生成。

• data-tip：在尚未验证而获取焦点时出现的提示。

• data-valid：验证规则，若有组合验证，以||符号分割。

• data-error：验证错误提示，对应data-valid，以||符号分割。

• 
  

单选/复选比较特殊，需要添加元素包裹单选/复选集合，并在包裹元素上加验证规则。

<div class="form_control">
  <span class="required" data-valid="isChecked" data-error="性别必选" data-type="radio">
      <label><input type="radio" name="sex">男</label>
      <label><input type="radio" name="sex">女</label>
      <label><input type="radio" name="sex">未知</label>
  </span>
</div>
<div class="form_control">
  <span class="required" data-valid="isChecked" data-error="标签至少选择一项" data-type="checkbox">
      <label><input type="checkbox" name="label">红</label>
      <label><input type="checkbox" name="label">绿</label>
      <label><input type="checkbox" name="label">蓝</label>
  </span>
</div>

三、JS代码

<script>
   //
   $('form').validate({
      type:{
         isChecked: function(value, errorMsg, el) {
            var i = 0;
            var $collection = $(el).find('input:checked');
            if (!$collection.length) {
               return errorMsg;
            }
         }
      },
      onFocus: function() {
         this.parent().addClass('active');
         return false;
      },
      onBlur: function() {
         var $parent = this.parent();
         var _status = parseInt(this.attr('data-status'));
         $parent.removeClass('active');
         if (!_status) {
            $parent.addClass('error');
         }
         return false;
      }
   });
   $('form').on('submit', function(event) {
      var bba=$(this).validate('submitValidate'); //return boolean(true false);
      if(bba==true){
         // alert('成功');
         //$.post({'bb.php'});
      }else{
         event.preventDefault();
         // return false;
         // alert('验证失败');
      }
   });
</script>