基于avalon的验证框架:validation

jopen 10年前

基于avalon的验证框架开发完毕,支持实时验证,失去焦点验证,提交验证,手动验证,异步验证(基于ES6的Promise)。可以在配置对象上的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
    }
},
</div> </div>

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

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

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

另一个例子:

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
    }
}
</div> </div>

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

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

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

onSuccess, onError, onComplete, onValidateAll, onReset, onResetAll
</div> </div>

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

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

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

如果用户指定了 norequired验证规则,如果input为空, 那么就会跳过之后的所有验证

使用说明
名字 类型 默认值 说明
配置参数
validationHooks Object {} 空对象,用于放置验证规则
onSuccess Function avalon.noop 空函数,单个验证成功时触发,this指向被验证元素this指向被验证元素,传参为一个对象数组
onError Function avalon.noop 空函数,单个验证失败时触发,this与传参情况同上
onComplete Function avalon.noop 空函数,单个验证无论成功与否都触发,this与传参情况同上
onValidateAll Function avalon.noop 空函数,整体验证后或调用了validateAll方法后触发
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回调
接口方法与固有属性
$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) Function
验证单个元素对应的VM中的属性是否符合格式
参数名/返回值 类型 说明
data Object 绑定对象
isValidateAll Undefined|Boolean 是否全部验证,是就禁止onSuccess, onError, onComplete触发
er

avalon.validation自带了许多 验证规则,满足你一般的业务需求。

大家可以在onReset的回调里得到第二个参数data, 然后调用data.valueResetor()将VM中的数据也置空,如布尔数据变false, 数值数据变0,数组数据变[],字符串数组变成""

也可以在页面添加不依赖于ms-duplex的绑定