jQuery验证插件validate.js

validate.js介绍

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

validate.js兼容性

• jQuery兼容：兼容jQuery1.7以上的版本
• 浏览器兼容：兼容IE7 以上，Chrome，Firefox，Opera，Safari，Mobile Browser

validate.js使用

• 首先是组要载入相关的资源文件，主要是jquery.js 和 validate.js，如下代码：

• 然后是是Dom标签验证规则的填写，代码如下：

  


  
    请选择省份
    001
    002
  

针对上述的代码，有几点解释，如下：

1. 给需要验证的表单元素的class填入required（不建议在这个class上做其他样式）。
2. 建议input用独立div包裹，因为验证的message是从当前input的父元素上append生成。
3. data-tip：在尚未验证而获取焦点时出现的提示。
4. data-valid：验证规则，若有组合验证，以||符号分割。
5. data-error：验证错误提示，对应data-valid，以||符号分割。
6. 单选/复选比较特殊，需要添加元素包裹单选/复选集合，并在包裹元素上加验证规则。

  
      男
      女
      未知
  


  
      红
      绿
      蓝
  

• 最后还有JavaScript调用相关方法等，代码如下：

//**注意：必须以表单元素调用validate**
  $('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;
    }
  });

Validate.js相关方法列表如下：

方法	语法	类型	说明
onFocus	arguments => event	Function	获取焦点时的callback
onBlur	arguments => event	Function	失去焦点时的callback
onChange	arguments => event	Function	触发change的callback
type	自定义验证规则，参数顺序：value,errorMsg,el

• 表单提交前的验证，代码如下：

  $('form').on('submit', function(event) {
    event.preventDefault();
    $(this).validate('submitValidate'); //return true or false;
  });

validate.js完整使用实例

    
    
    




    

        
    
    

        
    
    

        
    
    

      
          男
          女
          未知
      
    
    

      
          红
          绿
          蓝
      
    
    

        
            请选择省份
            001
            002
            003
            004
            005
            006
            007
            008
            009
            010
        
    
    

        
    

标题validate.js插件相关资源离线下载

地址：validate.js相关资源下载 提取码为：7b2p