avalon2砍掉了不少功能(如ms-include,ms-data),腾出空间加了其他更有用的功能。数据验证就是其中之一。现在avalon2内置的验证指令是参考之前的与。
avalon内置验证规则有
规则 | 描述 |
---|---|
required(true) | 必须输入的字段。 |
email(true) | 必须输入正确格式的电子邮件。 |
url(true) | 必须输入正确格式的网址。 |
date(true或正则) | 必须输入正确格式的日期。默认是要求YYYY-MM-dd这样的格式。 |
number(true) | 必须输入合法的数字(负数,小数)。 |
digits(true) | 必须输入整数。 |
pattern(正则或true) | 让输入数据匹配给定的正则,如果没有指定,那么会到元素上找pattern属性转换成正则再匹配。 |
equalto(ID名) | 输入值必须和 #id 元素的value 相同。 |
maxlength:5 | 输入长度最多是 5 的字符串(汉字算一个字符)。 |
minlength:10 | 输入长度最小是 10 的字符串(汉字算一个字符)。 |
chs(true) | 要求输入全部是中文。 |
max:5 | 输入值不能大于 5。 |
min:10 | 输入值不能小于 10。 |
这些验证规则要求使用ms-rules指令表示,要求为一个普通的JS对象。
此外要求验征框架能动起来,还必须在所有表单元素外包一个form元素,在form元素上加ms-validate指令。
ms-validate
因此,要运行起avalon2的内置验证框架,必须同时使用三个指令。ms-validate用于定义各种回调与全局的配置项(如什么时候进行验证)。ms-duplex用于将单个表单元素及相关信息组成一个Field对象,放到ms-validater指令的fields数组中。ms-rules用于定义验证规则。如果验证规则不满足你,你可以自行在avalon.validators对象上添加。
现在我们可以一下ms-validate的用法。其对应一个对象。
配置项 | 描述 |
---|---|
fields | 框架自行添加,用户不用写。为一个数组,放置ms-duplex生成的Field对象。 |
onSuccess | 空函数,单个验证成功时触发,this指向被验证元素this指向被验证元素,传参为一个对象数组外加一个可能存在的事件对象。 |
onError | 空函数,单个验证无论成功与否都触发,this与传参情况同上 |
onComplete | 空函数,单个验证无论成功与否都触发,this与传参情况同上。 |
onValidateAll | 空函数,整体验证后或调用了validateAll方法后触发;有了这东西你就不需要在form元素上ms-on-submit="submitForm",直接将提交逻辑写在onValidateAll回调上 |
onReset | 空函数,表单元素获取焦点时触发,this指向被验证元素,大家可以在这里清理className、value |
validateInBlur | true,在blur事件中进行验证,触发onSuccess, onError, onComplete回调 |
validateInKeyup | true, 在keyup事件中进行验证,触发onSuccess, onError, onComplete回调。当用户在ms-duplex中使用change debounce过滤器时会失效 |
validateAllInSubmit | true,在submit事件中执行onValidateAll回调 |
resetInFocus | true,在focus事件中执行onReset回调 |
deduplicateInValidateAll | false,在validateAll回调中对reason数组根据元素节点进行去重 |
在上表还有一个没有提到的东西是如何显示错误信息,这个avalon不帮你处理。但提示信息会帮你拼好,如果你没有写,直接用验证规则的message,否则在元素上找data-message或data-required-message这样的属性。
最后给一个复杂的例子:
ms-validate