validation

验证框架

基于avalon ms-duplex2.0的强大验证框架,大家可以直接在avalon.duplexHooks添加验证规则, 也可以在配置对象上的validationHooks中添加验证规则。

验证规则如下定义:

alpha_numeric: { //这是名字,不能存在-,因为它是这样使用的ms-duplex-int-alpha_numeric="prop"
    message: '必须为字母或数字', //这是错误提示,可以使用{{expr}}插值表达式,但这插值功能比较弱,
    //里面只能是某个单词,两边不能有空格
    get: function(value, data, next) { //这里的传参是固定的,next为回调
        next(/^[a-z0-9]+$/i.test(value)) //这里是规则
            //如果message有{{expr}}插值表达式,需要用data.data.expr = aaa设置参数,
            //aaa可以通过data.element.getAttribute()得到
        return value //原样返回value
    }
},

在validationHooks中自定验证规则,每个都必须写 message( message不能为空字符串)与 get方法。

验证规则不惧怕任何形式的异步,只要你决定进行验证时,执行next方法就行。next 需要传入布尔。

async: {
    message: "异步验证",
    get: function(value, data, next) {
        setTimeout(function() {
            next(true)
        }, 3000)
        return value
    }
},

另一个例子:

 beijing: {
     message: "当前位置必须是在{{city}}",
     get: function(value, data, next) {
         $.ajax({
             url: "http://ws.qunar.com/ips.jcp",
             dataType: "jsonp",
             jsonpCallback: "callback",
             success: function(data, textStatus, jqXHR) {
                 data.data.city = "北京"
                 next(data.city == value)
             }
         })
         return value
     }
 }

注意,本组件是基于 avalon1.3.7开发,如果是很旧的版本,可以使用avalon.validation.old.js,它一直兼容到avalon1.2.0。

注意,本组件只能绑定在 form元素上, <form ms-widget="validation"></>

验证框架提供了各式各样的回调,满足你最挑剔的需求:

onSuccess, onError, onComplete, onValidateAll, onReset, onResetAll

其中,前面四个是一个系列,它们都有1个参数,是一个对象数组,里面一些 验证规则对象(如果成功,数组为空); onReset是在元素获取焦点做重置工作的,如清理类名, 清空value值,onResetAll是用于重置整个表单,它会在组件执行它辖下的所有元素的onReset回调后再执行。

验证规则对象的结构如下:

{
    element: element, //添加了ms-duplex绑定的元素节点,它应该位于form[ms-widget="validation"]这个元素下
    data: {
        city: "北京"
    },
    message: '当前位置必须是在{{city}}',
    validateRule: "beijing",
    getMessage: function() {} //用户调用到方法即可以拿到完整的错误消息——“当前位置必须是在北京”
}

如果用户指定了 norequired验证规则,如果input为空, 那么就会跳过之后的所有验证; 在定义拦截器时,务必将它放在最前面, 如ms-duplex-norequired-int-gt='xxx'

使用说明

名字 类型 默认值 说明
配置参数
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元素
参数名/返回值 类型 说明
callback Null|Function 最后执行的回调,如果用户没传就使用vm.onValidateAll
resetAll(callback) Function 重置当前表单元素
参数名/返回值 类型 说明
callback Null|Function 最后执行的回调,如果用户没传就使用vm.onResetAll
validate(data,isValidateAll,event) Function 验证单个元素对应的VM中的属性是否符合格式
此方法是框架自己调用
参数名/返回值 类型 说明
data Object 绑定对象
isValidateAll Undefined|Boolean 是否全部验证,是就禁止onSuccess, onError, onComplete触发
event Undefined|Event 方便用户判定这是由keyup,还是blur等事件触发的

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个字