博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
avalon2学习教程12数据验证
阅读量:6479 次
发布时间:2019-06-23

本文共 3004 字,大约阅读时间需要 10 分钟。

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        

{

{@aaa}}

图片描述

因此,要运行起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        
验证完整的表单

主题 (至少选择两个)

转载地址:http://kvwuo.baihongyu.com/

你可能感兴趣的文章
让所有IE支持HTML5的解决方案
查看>>
RDD之五:Key-Value型Transformation算子
查看>>
percona 5.7.11root初始密码设置
查看>>
Cognitive Security的异常检测技术
查看>>
Impress.js上手 - 抛开PPT、制作Web 3D幻灯片放映
查看>>
生活杂事--度过十一中秋
查看>>
Pyrex也许是一个好东西
查看>>
WINFORM WPF字体颜色相互转换
查看>>
能力不是仅靠原始积累(三)
查看>>
实战:使用终端服务网关访问终端服务
查看>>
彻底学会使用epoll(一)——ET模式实现分析
查看>>
【Android 基础】Android中全屏或者取消标题栏
查看>>
脱离标准文档流(2)---定位
查看>>
IO流之字符流
查看>>
集合异常之List接口
查看>>
Softmax回归
查看>>
紫书 习题11-11 UVa 1644 (并查集)
查看>>
App工程结构搭建:几种常见Android代码架构分析
查看>>
使用openssl进行证书格式转换
查看>>
ZOJ 3777 Problem Arrangement
查看>>