自定义非重名校验

541 阅读1分钟

目标

实现表单数据校验:新添加的值和修改的值在整个模块中都不允许重复

原因

在编辑时,会发现当前这个名称的原来名字不能使用了。 编辑和添加是共用一套表单验证规则,而在添加时: 约定所有的已有的名称是不能使用的。

验收效果

添加 131-31.png 做编辑排除当前项


	   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' }
        ]
      }