通常新增或者编辑对form表单的校验都是全局性的校验:
this.$refs.form.validate( valid => {
if (valid) {
// 校验通过,业务逻辑代码...
}
});
如果需要对表单里的特定几个必填项进行校验,应该如何实现?
业务场景:下图点击保存按钮时,只需要校验前两项,其余参数不做校验,保存为草稿;点击提交按钮时,表单里面所有的必填项需要校验。
Element-ui 官网文档截图:
validateField 这个方法接受两个参数,第一参数为数组或者字符串,第二个参数为回调函数
// 点击保存、提交
toSubmit(type) {
let valiList = type === 'save' ? ['projectName', 'projectCode'] : ['projectName', 'projectCode', 'projectType']
let hasError = false;
this.$refs.ruleForm.validateField(['ip', 'port', 'user', 'pwd'], err => {
if (err) {
hasError = true;
this.$message.warning('请检查必填项是否填写完整/正确')
return false;
}
});
if (!hasError) {
// 校验通过,todo...
}
}
如果要校验某一项,第一个参数传字符串就可以了。
tips:
我们也可以动态更改rules规则里面的required字段,但这样点击保存时页面上的必填校验 * 会消失,用户体验会非常不友好。其实还有很多方式可以实现,可以评论区探讨一下~
标签:el,hasError,form,必填,校验,表单,validateField From: https://blog.csdn.net/qq_36020334/article/details/140960474