validator

---

说明

该模块只用来做表单验证，提供内置验证功能，支持自定义验证事件

使用方法

1. 存在data-validorname属性则有验证规则
2. 存在required属性，则必须验证规则
3. 存在pattern属性，同时存在data-valid属性时，每次都会用pattern的正则规则来验证
4. 存在min、max属性，用于验证长度规则（中文算两个字符）
5. 存在data-alt属性，验证失败的文案，如果当前标签的sibling存在validator-info类名时，该文案会赋值到此sibling中
6. 存在data-hint属性，验证成功的文案，如果当前标签的sibling存在validator-info类名时，该文案会赋值到此sibling中
7. 存在type属性，且其值为form时，非表单元素可以模拟表单元素进行校验（如: div）

<div id="JS_form">
	<input class="validator" date-valid="qq" pattern="^\d*$"
		 min="5" max="11" name="qq" data-alt="qq必须是5-11位数字" type="text" />
	<div class="simulate-input" name="myname" value="" type="form" required>我是一个虚拟的表单元素</div>
	<span class="validator-info"></span>
	<button id="JS_submit">提交</button>
</div>

初始化参数

• id: 表单id，取不到id对应的dom时默认使用document
• custom: Object用于自定义表单事件，其key值对应验证标签中的[data-valid属性]
• showOnClass：文案显示在类名为showOnClass的sibling上，默认validator-info
• isFocus: 验证失败后，焦点是否跳到失败节点上，默认true
• pass: 调试使用，true时直接跳过验证，直接进入验证通过事件，默认false

事件机制

• on事件，用于绑定验证失败事件，验证成功事件
  • error 验证失败回调事件，带参数function，其中function返回值有name, dom, alt
  • success 验证通过回调事件，带参数function
• onvalid事件，用于绑定自定义验证事件，带3个参数
  • Param 1: string自定义验证事件的名称，可用于验证标签中的[data-valid属性]
  • Param 2: function函数，其中function带有形参val,dom; 用于绑定自定义验证事件函数，此函数必须带有返回值为true or false
  • Param 3: function函数，成功绑定事件的回调
• onvalid事件，用于解绑验证事件，带2个参数
  • Param 1: string验证事件的名称
  • Param 2: function函数，成功绑定事件的回调
• verify事件，用于开始执行验证，验证通过则调用on的success事件，反之调用on的error事件
• is事件，简单对一个值进行验证
  • Param 1: 验证类型，即data-valid的值，也支持自定义验证规则
  • Param 2: 验证的值

data-valid属性值介绍

• number: 只能是数字
• int: 只能是整数
• mobile: 手机号码格式
• phone: 固定电话格式
• mobilephone: 手机或固话格式
• zipcode: 邮政编码格式
• email: 邮箱格式
• date: 日期格式2015-01-01 or 2015/01/01
• time: 时间格式11:56 or 11:56:29
• datetime: 日期时间格式2015-01-01 11:56 or 2015-01-01 11:56:29
• idcard: 身份证格式
• url: 网址格式
• wechatid: 微信号（微信账号仅支持6-20个字母、数字、下划线或减号，以字母开头）

规则优先级说明

绑定规则emit("onvalid", func) > pattern属性正则规则 > 初始化参数custom规则 > 内置正则规则

注意

• select校验时，option的value必须设置，就算为空也要设置为空
• 非表单元素校验时必须增加type="form", 别忘了增加required和name属性才能校验

@todo

• select校验、非元素表单校验少了单元测试