| 名字 | 类型 | 默认值 | 说明 | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 配置参数 | |||||||||||||||
| validationHooks | Object | {} | 空对象,用于放置验证规则 | ||||||||||||
| onSuccess | Function | avalon.noop | 空函数,单个验证成功时触发,this指向被验证元素this指向被验证元素,传参为一个对象数组外加一个可能存在的事件对象 | ||||||||||||
| onError | Function | avalon.noop | 空函数,单个验证失败时触发,this与传参情况同上 | ||||||||||||
| onComplete | Function | avalon.noop | 空函数,单个验证无论成功与否都触发,this与传参情况同上 | ||||||||||||
| onValidateAll | Function | avalon.noop | 空函数,整体验证后或调用了validateAll方法后触发;有了这东西你就不需要在form元素上ms-on-submit="submitForm",直接将提交逻辑写在onValidateAll回调上 | ||||||||||||
| onReset | Function | avalon.noop | 空函数,表单元素获取焦点时触发,this指向被验证元素,大家可以在这里清理className、value | ||||||||||||
| onResetAll | Function | avalon.noop | 空函数,当用户调用了resetAll后触发, | ||||||||||||
| validateInBlur | Boolean | true | true,在blur事件中进行验证,触发onSuccess, onError, onComplete回调 | ||||||||||||
| validateInKeyup | Boolean | true | true,在keyup事件中进行验证,触发onSuccess, onError, onComplete回调 | ||||||||||||
| validateAllInSubmit | Boolean | true | true,在submit事件中执行onValidateAll回调 | ||||||||||||
| resetInFocus | Boolean | true | true,在focus事件中执行onReset回调, | ||||||||||||
| deduplicateInValidateAll | Boolean | false | false,在validateAll回调中对reason数组根据元素节点进行去重 | ||||||||||||
| 接口方法与固有属性 | |||||||||||||||
| $init() | Function | 为元素绑定submit事件,阻止默认行为 | |||||||||||||
| $destory() | Function | 销毁组件,移除相关回调 | |||||||||||||
| validateAll(callback) | Function | 验证当前元素下的所有非disabled元素
|
|||||||||||||
| resetAll(callback) | Function | 重置当前表单元素
|
|||||||||||||
| validate(data,isValidateAll,event) | Function | 验证单个元素对应的VM中的属性是否符合格式
此方法是框架自己调用
|
|||||||||||||
avalon.validation自带了许多
验证规则,满足你一般的业务需求。
大家可以在onReset的回调里得到第二个参数data, 然后调用data.valueResetor()将VM中的数据也置空,如布尔数据变false, 数值数据变0,数组数据变[],字符串数组变成""
比如说<input ms-duplex-alpha="aaa"/<要求用户输出的都是字母,如果输入其他类型的内容, 它就会报错 必须是字母。为什么呢,因为alpha为一个内置拦截器, 定义在avalon.duplexHooks上,结构为
alpha: {
message: '必须是字母',
get: function(value, data, next) {
next(/^[a-z]+$/i.test(value))
return value
}
},如果想显示别的提示信息有三种办法,一就是重写这个栏截器的message属性; 二就是添加data-duplex-message="新提示信息"(不过这个已经不提倡使用了,
因为一个表单控制可能使用N个拦截器做验证,如ms-duplex-required-alpha-minlength, 这会覆盖其他拦截器的默认提示信息);三就是使用data-duplex-alpha-message="专门用于alpha提示信息"
此外,提示信息里面可以使用插值表达式,虽然不能使用变量,也应该够用,比如说minlength拦截器
minlength: {
message: '最少输入{{min}}个字',
get: function(value, data, next) {
var elem = data.element
var a = parseInt(elem.getAttribute("minlength"), 10)
if (!isFinite(a)) {
a = parseInt(elem.getAttribute("data-duplex-minlength"), 10)
}
var num = data.data.min = a
next(value.length >= num)
return value
}
},我们必须传入一个min参数,这要在元素上添加
这样报错时就提示要
最少输入6个字