avalon2学习教程12数据验证
2016-06-27 15:32
411 查看
avalon2砍掉了不少功能(如ms-include,ms-data),腾出空间加了其他更有用的功能。数据验证就是其中之一。现在avalon2内置的验证指令是参考之前的oniui验证框架与jquery validation。
avalon内置验证规则有
这些验证规则要求使用ms-rules指令表示,要求为一个普通的JS对象。
此外要求验征框架能动起来,还必须在所有表单元素外包一个form元素,在form元素上加ms-validate指令。
因此,要运行起avalon2的内置验证框架,必须同时使用三个指令。ms-validate用于定义各种回调与全局的配置项(如什么时候进行验证)。ms-duplex用于将单个表单元素及相关信息组成一个Field对象,放到ms-validater指令的fields数组中。ms-rules用于定义验证规则。如果验证规则不满足你,你可以自行在avalon.validators对象上添加。
现在我们可以一下ms-validate的用法。其对应一个对象。
在上表还有一个没有提到的东西是如何显示错误信息,这个avalon不帮你处理。但提示信息会帮你拼好,如果你没有写,直接用验证规则的message,否则在元素上找data-message或data-required-message这样的属性。
最后给一个复杂的例子:
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。 |
此外要求验征框架能动起来,还必须在所有表单元素外包一个form元素,在form元素上加ms-validate指令。
<!DOCTYPE html> <html> <head> <title>ms-validate</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <script src="./dist/avalon.js"></script> <script> var vm = avalon.define({ $id: "test", aaa: "", bbb: '', ccc: '', validate: { onError: function (reasons) { reasons.forEach(function (reason) { console.log(reason.getMessage()) }) }, onValidateAll: function (reasons) { if (reasons.length) { console.log('有表单没有通过') } else { console.log('全部通过') } } } }) </script> </head> <body ms-controller="test"> <form ms-validate="@validate"> <p><input ms-duplex="@aaa" placeholder="username" ms-rules='{required:true,chs:true}' >{{@aaa}}</p> <p><input type="password" id="pw" placeholder="password" ms-rules='{required:true}' ms-duplex="@bbb" /></p> <p><input type="password" ms-rules='{required:true,equalto:"pw"}' placeholder="再填一次" ms-duplex="@ccc | change" /></p> <p><input type="submit" value="submit"/></p> </form> </body> </html>
因此,要运行起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数组根据元素节点进行去重 |
最后给一个复杂的例子:
<!DOCTYPE html> <html> <head> <title>ms-validate</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <script src="./dist/avalon.js"></script> <script> var vm = avalon.define({ $id: "test", firstname: '', lastname: '', username: '', password: '', confirm_password: '', email: '', agree: false, topic: [], toggle: false, validate: { onError: function (reasons) { reasons.forEach(function (reason) { console.log(reason.getMessage()) }) }, onValidateAll: function (reasons) { if (reasons.length) { console.log('有表单没有通过') } else { console.log('全部通过') } } } }) avalon.validators.checked = { message: '必须扣上', get: function (value, field, next) { next(value) return value } } avalon.validators.selecttwo = { message: '至少选择两个', get: function (value, field, next) { next(!vm.toggle || value.length >= 2) return value } } </script> </head> <body ms-controller="test"> <form class="cmxform" ms-validate="@validate" > <fieldset> <legend>验证完整的表单</legend> <p> <label for="firstname">名字</label> <input id="firstname" name="firstname" ms-duplex="@firstname" ms-rules="{required:true}" data-required-message="请输入您的名字" > </p> <p> <label for="lastname">姓氏</label> <input id="lastname" name="lastname" ms-duplex="@lastname" ms-rules="{required:true}" data-required-message="请输入您的姓氏" > </p> <p> <label for="username">用户名</label> <input id="username" name="username" ms-duplex="@username | change" ms-rules="{required:true, minlength:2}" > </p> <p> <label for="password">密码</label> <input id="password" name="password" type="password" ms-duplex="@password" ms-rules="{required:true,minlength:5}" data-required-message="请输入密码" data-required-message="密码长度不能小于 5 个字母" > </p> <p> <label for="confirm_password">验证密码</label> <input id="confirm_password" name="confirm_password" type="password" ms-duplex="@confirm_password | change" ms-rules="{required:true,equalto:'#password'}" data-equalto-message="两次密码输入不一致" > </p> <p> <label for="email">Email</label> <input id="email" name="email" type="email" ms-duplex="@email" ms-rules="{email:true}" data-email-message="请输入一个正确的邮箱" > </p> <p> <label for="agree">请同意我们的声明</label> <input type="checkbox" class="checkbox" id="agree" name="agree" ms-duplex-checked="@agree" ms-rules="{checked:true}" > </p> <p> <label for="newsletter">我乐意接收新信息</label> <input type="checkbox" class="checkbox" id="newsletter" name="newsletter" ms-duplex-checked="@toggle" > </p> <fieldset id="newsletter_topics" ms-visible="@toggle" > <legend>主题 (至少选择两个) </legend> <label for="topic_marketflash"> <input type="checkbox" id="topic_marketflash" value="marketflash" name="topic[]" ms-duplex="@topic" ms-rules="{selecttwo:true}" >Marketflash </label> <label for="topic_fuzz"> <input type="checkbox" id="topic_fuzz" value="fuzz" name="topic[]" ms-duplex="@topic" ms-rules="{selecttwo:true}" >Latest fuzz </label> <label for="topic_digester"> <input type="checkbox" id="topic_digester" value="digester" name="topic[]" ms-duplex="@topic" ms-rules="{selecttwo:true}" >Mailing list digester </label> <label for="topic" class="error" style="display:none">至少选择两个</label> </fieldset> <p> <input class="submit" type="submit" value="提交"> </p> </fieldset> </form> </body> </html>
相关文章推荐
- .net web api 一
- 如何使用Xcode的Targets来管理开发和生产版本的构建
- dragsort拖动排序
- Android内核开发:系统启动速度优化-Android OS启动优化(转)
- Android SDK和NDK
- 转:云风skynet服务端框架研究
- Android 开源框架Universal-Image-Loader完全解析(二)--- 图片缓存策略详解
- 每天一个linux命令(1):tail 命令
- 你想建设一个能承受500万PV/每天的网站吗
- curl php 下载
- Android的面孔_Actiyity
- Tomcat服务器安装配置教程(win7)
- Win2016 Nano Server安装
- PHP学习笔记之数组篇
- Java Annotation注解继承说明
- 数组、对象等的按值传递与数字、字符串不同
- motan解读:添加spring 支持
- HDU 2089 不要62(数位DP)
- IOS通讯录的隐藏标签(电话)的特殊功能
- ACdream 1210 Chinese Girls' Amusement(高精度)