注意：ms-rules只能用于添加ms-duplex指令的表单元素上。
avalon内置验证规则有：
| 规则 | 描述 |
|---|---|
| required(true) | 必须输入的字段 |
| norequired(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指令。
下面是一段示例代码：
var vm = avalon.define({
$id: "validate1",
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('全部通过')
}
}
}
})
<div ms-controller="validate1">
<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>
</div>根据上面示例代码可以看出，要运行起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>
avalon.validators.aaa = {
message: '必须数字并大于0',
get: function (value, field, next) {
//想知道它们三个参数是什么,可以console.log(value, field,next)
var ok = (value === '' || (Number(value) > 0))
next(ok)
return value
}
}
var vm = avalon.define({
$id: "test",
aaa: '',
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 class="cmxform" ms-validate="@validate" >
<fieldset>
<legend>自定义规则</legend>
<p>
<input
ms-duplex="@aaa"
ms-rules="{aaa: true}"
>
</p>
</fieldset>
<p>
<input class="submit" type="submit" value="提交">
</p>
</fieldset>
</form>
</body>
</html>在上表还有一个没有提到的东西是如何显示错误信息，这个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",
rules:{required:true,email:true},
email:'',
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 class="cmxform" ms-validate="@validate" >
<fieldset>
<legend>验证完整的表单</legend>
<p>
<label for="email">Email</label>
<input id="email"
name="email"
type="email"
ms-duplex="@email"
ms-rules="@rules"
data-required-message="请输入"
data-email-message="请输入一个正确的邮箱"
>
</p>
</fieldset>
<p>
<input class="submit" type="submit" value="提交">
</p>
</fieldset>
</form>
</body>
</html>
481
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
