基于avalon的验证框架：validation

jopen 9年前

基于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的绑定

validateVM.data.push({
    valueAccessor: function() {}
    validateParam: "xxx",
    element: element
})
</div> </div> </div>

项目主页：http://www.open-open.com/lib/view/home/1416408452617

相关经验