最近帮朋友看一个vue项目,需要在整个表单的一个输入控件上添加校验,因为表单是动态创建的,就没有考虑整个表单绑定rules,而是在<el-form-item>上绑定了rules,具体代码如下:
template/html部分:
<el-form-item
label="自定义校验"
prop="text"
:rules="[
{
required: true,
message: '请输入~',
trigger: 'blur'
}, {
validator: (rule, value, callback)=>{validateSku(rule, value, callback)},
trigger: ['blur', 'change']
}
]">
<el-input
v-model="formInline.text"
placeholder="请输入">
</el-input>
</el-form-item>
javaScript部分:
<script>
export default {
data() {
return {
formInline: {
text: '',
}
}
},
methods: {
onSubmit() {
console.log('submit!');
},
/**
* @method 自定义校验方法
* callback 必须调用
*/
validateSku(rule, value, callback){
var text = /,/g;
if (text.test(value)) {
callback(new Error("输入不可以包含“,”"))
} else {
callback();
}
}
}
}
</script>
运行结果:
1.失去焦点与点击提交时:
2.输入 “ , ” 时:
ps:
表单整体添加校验可参考Element-ui Form组件的 “ 自定义校验规则 ” 案例!
以上分享仅供参考,欢迎留言交流~