Validate 插件

功能强大的表单验证插件,适用于日常的 E-mail、电话号码、日期等验证,除自身拥有丰富的验证规则外,还可以添加自定义的验证规则。

代码演示

    
基本用法
validate + ajaxForm 组合使用
查看代码
var validateDemo = $('.form-ajaxSubmit').IUI('validate',{
  strategy:{                      // 自定义策略
      ajaxValid:function(params){
          // this => validate object
          // params => {errMsg:'用户名已被占用,请重新命名',x:1,y:2,z:3}
          // 校验条件不通过必须 return false;
          if(this.self[0].value === '123'){
            return false;
          }
      }
  },
  collections:[
    {
        required: 'username',
        context: '.form-group',
        matches: {
            isNonEmpty: {
                errMsg: '用户名不能为空'
            },
            ajaxValid: {
                errMsg: '用户名已被占用,请重新命名',
                x:1,
                y:2,
                z:3
            }
        }
    },
    {
      required:'email',            // 对应被验证input元素的 data-required="email"
      context:'.form-group',       // 校验结果信息存放位置,一般是input的父元素
      infoMsg:'请输入您的邮箱',      // 输入提示接口
      matches:{                    // 校验规则,可校验多个条件
        isNonEmpty:{               // isNonEmpty 为校验条件,一般称为策略名
          errMsg:'邮箱不能为空。'    // 策略值,作为策略函数的参数,支持扩展自定义
        },
        isEmail:{
          errMsg:'邮箱格式不正确,请检查。'
        }
      }
    },
    {
      required:'password',
      context:'.form-group',
      infoMsg:'请输入您的密码',
      unblur:true,                // 取消 blur 事件
      matches:{
        isNonEmpty:{
          errMsg:'密码不能为空'
        },
        between:{
          errMsg:'密码长度为 6 - 16 位',
          range:[6,16]
        }
      }
    },
    {
      required:'sexy',
      context:'.form-group',
      matches:{
        isChecked:{
          errMsg:'请选择您的性别'
        }
      }
    },
    {
      required:'agree',
      context:'.checkbox',
      matches:{
        isChecked:{
          errMsg:'请同意条款'
        }
      }
    }
  ]
});


$('.form-ajaxSubmit').IUI('ajaxForm',{
  before:function(event,config){
    // this => $form
    // return false can prevent submit
    if (validateDemo.batch() === false) {
      return false;
    }
    mark('trigger before callback,    ajax-data:' + this.serialize());
  },
  success:function(response,config){
    // this => $form
    mark('trigger success callback');
  },
  pending:function(config){
    // this => $form
    mark('trigger pending callback');
  },
  error:function(error,config){
    // this => $form
    mark('trigger error callback');
  },
  always:function(response,config){
    // this => $form
    mark('trigger alway callback');
  }
});

// 侦听事件
$('.form-ajaxSubmit').find('input').each(function(index, el) {
  $(el).on('validate.focus', function(event) {
    event.preventDefault();
    var $this =$(this);
    var name = $this.attr('name');
    mark('[name="'+name+'"] trigger focus event');
  });
  $(el).on('validate.blur', function(event) {
    event.preventDefault();
    var $this =$(this);
    var name = $this.attr('name');
    mark('[name="'+name+'"] trigger blur event');
  });
  $(el).on('validate.change', function(event) {
    event.preventDefault();
    var $this =$(this);
    var name = $this.attr('name');
    mark('[name="'+name+'"] trigger change event');
  });
});

API

属性 说明 类型 默认值
globalMessage 全局提示,传元素选择器(#el or .el)即可开启,若为false,则逐行提示 String/Boolean false
errorClass 校验出错信息的classname,若为空,则不出现 String .validate-error
infoClass focus触发的提示信息的classname,若为空,则不出现 String .validate-info
successClass 校验成功信息的classname,若为空,则不出现 String -
collections 校验集合器 Array []
strategy 自定义策略 Object -

如果您发现本页有什么问题,欢迎来提单 Issue : https://github.com/Janking/infinite-ui/issues