- 版本：1.4
- 教程：http://gallery.kissyui.com/verify/1.4/guide/index.html
- demo：http://gallery.kissyui.com/verify/1.4/demo/index.html
[!]添加适配器，提供更安全的环境:指定操作范围参数el。
[!]修复add 、remove 、modify方法。
verify,灵活的垂直表单验证组件。
表单验证的配置非常灵活，既可以选择内置的规则，也可以自己指定校验方法。
由于所依赖的业务方原因，组件提供的默认样式更适用于垂直化的表单验证。
S.use('gallery/verify/1.4/index', function (S, verify) {
var verify = new verify('#J_Container1',{
fields:{
name: [
['required', '请填写联系人姓名。'],
['length', 0, 30, '联系人姓名不要超过30个字']
],
tel: [
['required', '请填写联系人手机号码。'],
'mobile'
],
phone: [
['mobile', '备选号码必须为数字']
],
email: [
['required', '请填写联系人邮箱。'],
['email', '请检查电子邮箱的格式是否正确。']
]
}
});
| 字段 | 类型 | 含义 | 说明 |
| fields | object | 要校验的域。 | fields对应的value值是一个数值，每个数组的项表示一个校验规则集，可以是数组、函数或字符串，具体意义参见“内置规则校验”表格 |
| nodeFn | function | 要校验的表单域节点 | 默认按fields的name值对应节点id获取 |
| valueFn | function | 验证时的value值获取 | 默认获取对应input的value值（如果域节点不是input 默认返回''空字符串) |
| disabled | array | 被禁用的域 | 默认为空数组 |
| autoVerify | boolean | 是否自动校验 | 默认 true |
| errorTipTpl | html片段 | 错误提示dom结构 | 如果想重置默认的提示样式，可以传入自定义的template，但要注意的是：显示错误文案的容器需加J_InfoContainer这个JS的class钩子,否则会直接在错误容器里面写html |
| errorWraper | KISSY Selector | 错误提示append的位置 | 可以指定错误提示显示位置，默认为null,此时在域所在节点的父元素下append。由于没有指定的样式和交互，如果选择了这个参数，可能需要自行调整交互 |
内置规则校验
- 函数 此时可以自己定义验证方法，回调参数为验证时的value值。返回格式为[isSuceess{boolean},info{string}]
- 数组 此时第一个数组项为规则名称，最后一个为错误提示文案，中间的为其他参数
- 字符串 此时字符串既为规则名称
| 规则名称 | 含义 | 参数 | 规则 | 默认错误值 |
| required | 必填 | info | 为空时不通过 | '亲，不能为空。' |
| name | 名字 | info | 名字中有中英文之外的字符时不通过 | 姓名只能由中文或英文字母组成，请检查是否存在其它字符 |
| length | 长度 | [min,max,]info | 先校验最小长度 ;再校验最大长度 | 亲，长度至少需要min || 亲，长度最多不能超过max |
| 邮件格式 | info | 亲，请输入正确的email格式。 | ||
| english | 英文字母 | info | 规则 | 亲，这里只能输入英文字母。 |
| mobile | 简单的手机号码校验 | info | 只要是纯数字和-的组合即可 | 手机号码必须为数字。 |
| range | 含义 | min,max,info | 数值区间 | 亲，只能在{min}至{max}之间 |
| number | 含义 | info | 规则 | 亲，只能输入数字。 |
| pattern | 正则表达式 | info | 不匹配正则时报错 | 亲，输入格式有误。 |
| date | 日期格式 | info | 不满足YYYY-MM-DD时报错 | 请填写正确的日期格式：YYYY-MM-DD。 |
| 方法 | 参数 | 含义 | 返回值 |
| verify | (field{string}) | 要校验的域。不传时校验所有的域 | {succeed:boolean,results:[{succeed:boolean,info:'errMsg' },firstError]} |
| add | (field,value) field 域名 ;value 规则 |
添加校验域 | |
| remove | (field) | 移除校验域 | |
| modify | (field ,value) | 修改某个域的校验规则 | |
| disable | (field,isable) isable[boolean]是否可用 true可以，false 不可以 |
禁用/启用某个域 | |
| reset | (field) field要重置的域，不传时为所有域 |
重置状态 | |
| destroy | 注销 | ||
| error | 显示错误信息并标注错误状态 |
| 事件名称 | 触发条件 | 提供数据 |
| verify | 每一个域校验结束之后 | field 域 info 信息 succeed 是否成功（true 成功 false 失败） |
| fail | 每一个域校验失败之后 | field 域 info 信息 |