目标
实现表单数据校验:新添加的值和修改的值在整个模块中都不允许重复
原因
在编辑时,会发现当前这个名称的原来名字不能使用了。 编辑和添加是共用一套表单验证规则,而在添加时: 约定所有的已有的名称是不能使用的。
验收效果
添加
做编辑排除当前项
rule : 当前的规则
value : 被校验的值
callback : 回调
如果通过了规则检验,直接调用callback()
如果没有通过规则检验,调用callback(错误对象,在错误对象中说明原因)
callback(new Error('错误说明'))
const validEdit = (rule, value, callback) => {
//判断如果是编辑
if (this.isEdit) {
//排除当前正在编辑的那项,拿到简单列表的value和数据里的id不相等的其他所有项。map拿到里面所有的名称
const list = this.asimple.filter(it => it.value !== this.id).map(it => it.label)
// 判断传入的值是否可以通过校验, 优化的写法
list.includes(value) ? callback(new Error('名称' + value + '已经存在')) : callback()
} else {
//那么添加走这行代码
const existCodeList = this.asimple.map(item => item.label)
// 判断传入的值是否可以通过校验
if (existCodeList.includes(value)) {
callback(new Error('名字' + value + '已经被占用了'))
} else {
callback()
}
}
}
rules: {
subjectName: [
{ required: true, message: '请输入学科名称', trigger: 'blur' },
{ validator: validEdit, trigger: 'blur' }
]
}