avalon框架系列---指令(四)
这一节主要是表单方面的指令,
表单页面的开发一般需要两个特点:1.输入内容按规则验证 2.表单内容提交
1.ms-validate 表单内容提交
该指令只能用于form元素上，用于为表单添加验证功能
指令的值对应一个对象，由于对象比较大，建议写在vm中
一般会这么写:
achievements: {
resetInFocus: true,
onSuccess: function (reasons) {
reasons.forEach(function (reason) {
$('#' + reason.element.id + 'Tips').html("");
})
},
onValidateAll: function (reasons) {
if (reasons.length) {
reasons.forEach(function (reason) {
$('#' + reason.element.id + 'Tips').html(reason.getMessage()).css("color", "red");
$('html,body').animate({scrollTop: $('#' + reason.element.id + 'Tips').parent().parent().prev().offset().top}, 200);
})
} else {
正式的收集参数和提交给后台方法
}
}
},
以上校验对应对象时,可随意写以下的:
onError: avalon.noop,//针对单个表单元素（使用了ms-duplex的input, select）
onSuccess: avalon.noop,//针对单个表单元素
onComplete: avalon.noop,//针对单个表单元素
onReset: avalon.noop,//针对单个表单元素
validateInBlur: true, // {Boolean} true，在blur事件中进行验证,触发onSuccess, onError, onComplete回调
validateInKeyup: true, // {Boolean} true，在keyup事件中进行验证,触发onSuccess, onError, onComplete回调
validateAllInSubmit: true, // {Boolean} true，在submit事件中执行onValidateAll回调
resetInFocus: true, // {Boolean} true，在focus事件中执行onReset回调,
deduplicateInValidateAll: false // {Boolean} false，在validateAll回调中对reason数组根据元素节点进行去重
2.ms-rules 校验规则对象
只能用于添加ms-duplex指令的表单元素
avalon内置的校验规则有很多,可在官方文档上查看,我们这里说下自定义的校验规则
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
}
}
ms-duplex="@aaa" ms-rules="{aaa: true}" > 还有一种是内置的校验规则,但是错误的提示不符合需求,可以使用自定义的提示 data-xxx-message="xxxxxxx"(主要用于required等其他规则)