自定义表单验证逻辑

自定义表单验证逻辑

有时我们需要使用自定义的表单校验例如不能同名

需求1不能有重复的名字

     // 简化数据
      this.orgList = res.data.map(item => ({
        pid: item.pid,
        name: item.name.trim(),
        code: item.code,
        id: item.id
      }))

  // 在data中和return同级
  // 定义一个自定义验证
    const valiName = (reles, value, callback) => {
      // 获取到同级pid,只要pid一致
      let existNameList = this.orgList.filter(item => item.pid === this.formData.pid)
      // 判断是否是编辑
      if (this.isEdit) {
        existNameList = this.orgList.filter(item => item.pid === this.formData.pid && item.id !== this.formData.id)
      }
      // 将统计权限点的name组成一个新数组,使用includes 方法进行查找
      existNameList.map(item => item.name).includes(value) ? callback(new Error('已存在')) : callback()
    }

使用element-ui提供的验证规则

   { validator: valiName, trigger: 'blur' }

需求2
数据是唯一的

 // 唯一标识
    const valiCode = (reles, value, callback) => {
      let existCodeList = this.orgList
      if (this.isEdit) {
        existCodeList = this.orgList.filter(item => item.id !== this.formData.id)
      }
      existCodeList.map(item => item.code).includes(value) ? callback(new Error('已存在')) : callback()
    }

  { validator: valiCode, trigger: 'blur' }