avalon2学习教程12数据验证
avalon2砍掉了不少功能（如ms-include,ms-data），腾出空间加了其他更有用的功能。数据验证就是其中之一。现在avalon2内置的验证指令是参考之前的oniui验证框架与jquery validation。
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指令。
<!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数组根据元素节点进行去重 |
在上表还有一个没有提到的东西是如何显示错误信息，这个avalon不帮你处理。但提示信息会帮你拼好，如果你没有写，直接用验证规则的message，否则在元素上找data-message或data-required-message这样的属性。
最后给一个复杂的例子：
<!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>
avalon2学习教程12数据验证的更多相关文章
- avalon2学习教程11数据联动
在许多表单应用,我们经常遇到点击一个复选框(或下拉框)会引发旁边的复选框(或下拉框)发生改变,这种联动效果用avalon来做是非常简单的.因为avalon拥有经典MVVM框架的一大利器,双向绑定!绝大 ...
- avalon2学习教程 03数据填充
数据填充是一个模版最基础的功能,直接从JSON(vm)取出数据,放到适当的位置上.在静态模板中,不区分文本与HTML,只看你的字符串是否有< >来决定生成文本节点与元素节点.但MVVM中, ...
- ASP.NET MVC 5 学习教程：添加验证
原文 ASP.NET MVC 5 学习教程:添加验证 起飞网 ASP.NET MVC 5 学习教程目录: 添加控制器 添加视图 修改视图和布局页 控制器传递数据给视图 添加模型 创建连接字符串 通过控 ...
- ASP.NET MVC 5 学习教程：数据迁移之添加字段
原文 ASP.NET MVC 5 学习教程:数据迁移之添加字段 起飞网 ASP.NET MVC 5 学习教程目录: 添加控制器 添加视图 修改视图和布局页 控制器传递数据给视图 添加模型 创建连接字符 ...
- Silverlight实例教程 - Validation数据验证DataAnnotation机制和调试技巧（转载）
Silverlight 4 Validation验证实例系列 Silverlight实例教程 - Validation数据验证开篇 Silverlight实例教程 - Validation数据验证基础 ...
- Silverlight实例教程 - Validation数据验证基础属性和事件（转载）
Silverlight 4 Validation验证实例系列 Silverlight实例教程 - Validation数据验证开篇 Silverlight实例教程 - Validation数据验证基础 ...
- Silverlight实例教程 - Validation数据验证开篇
Silverlight 4 Validation验证实例系列 Silverlight实例教程 - Validation数据验证开篇 Silverlight实例教程 - Validation数据验证基础 ...
- ThinkPHP 学习笔记 ( 五 ) 数据验证
根据官网的教程 ( http://www.thinkphp.cn/info/171.html ),数据验证的使用静态定义方式 ( 以 regex 为例 ) 无法验证数据: 而采用动态验证则正常: 控制 ...
- Tensorflow学习教程------读取数据、建立网络、训练模型，小巧而完整的代码示例
紧接上篇Tensorflow学习教程------tfrecords数据格式生成与读取,本篇将数据读取.建立网络以及模型训练整理成一个小样例,完整代码如下. #coding:utf-8 import t ...
随机推荐
- IOS 取消表格单元格 TableViewCell 去掉高亮状态 点击Cell取消选择状态
以下是两种实现效果 1. 自定义cell 继承UITableViewCell 重写 -(void)setSelected:(BOOL)selected animated:(BOOL)animated ...
- Sublime Text 配置
Sublime Text 配置 1.键盘映射 映射成emacs的键盘方式: Preferences --> Key Bounding - user:然后复制如下配置信息(注意取消前缀“...-- ...
- （实用篇）php数组查找函数in_array()、array_search()、array_key_exists()使用
php在数组中查找指定值是否存在的方法有很多,记得很久以前我一直都是傻傻的用foreach循环来查找的,下面我主要分享一下用php内置的三个数组函数来查找指定值是否存在于数组中,这三个数组分别是 in ...
- Bean的定义及作用域的注解实现
1. Classpath扫描与组件管理 从Spring3.0开始,Spring JavaConfig项目提供了很多特性,包括使用java而不是XML定义bean. 比如@configuration, ...
- 关于 Graph Convolutional Networks 资料收集
关于 Graph Convolutional Networks 资料收集 1. GRAPH CONVOLUTIONAL NETWORKS ------ THOMAS KIPF, 30 SEPTE ...
- LAMP平台搭建菜鸟入门级实验
LAMP平台搭建(菜鸟入门级) mysql 安装: (1)二进制安装 二进制安装 ,执行解压配置即可.无须执行三布安装. (2)源码编译安装 安装准备工作: (1)查看系统配置:#uname -a/ ...
- win7 ：安装SQL2005
转载:http://www.cnblogs.com/icewee/articles/2019783.html 操作系统:Microsoft Windows 7 旗舰版(64位) 数据库版本:SQL ...
- LeetCode "Binary Tree Level Order Traversal II" using DFS
BFS solution is intuitive - here I will show a DFS based solution: /** * Definition for a binary tre ...
- [jQuery]html(),text(),val()方法的区别
1.HTML html():取得第一个匹配元素的html内容.这个函数不能用于XML文档.但可以用于XHTML文档 html(val):设置每一个匹配元素的html内容.这个函数不能用于XML文档.但 ...
- 将表里的数据批量生成INSERT语句的存储过程
有时候,我们需要将某个表里的数据全部导出来,迁移到另一个相同结构的库中,这里可以采取一个简便的方法,通过一个存储过程批量导出数据并生成SQL语句,非常方便.存储过程如下: )) as begin de ...