表单自定义校验规则

表单涉及到自定义校验, 如果是跟业务相关的校验, 一般校验规则会比较细致, 注意点很多, 逻辑点一定要理清楚

下面是表单自定义校验规则写法,

也附上最近写的一段跟业务相关的自定义规则代码

    // 部门编码校验
    const validCode = (rule, value, callback) => {
      // const obj = this.originList.find(item => item.code === value)
      // 添加子部门 , 部门code不能与originList中的code重复

      // 1. 已经存在的部门编号
      let existCodeList = this.originList.map(item => item.code)
      // 如果是编辑状态, 把当前编辑的部门编号排除在外
      if (this.isEdit) {
        // (1) 根据当前的编号找到对应的部门code
        const curDep = this.originList.find(item => item.id === this.pid)
        const curCode = curDep.code
        // (2) 排除当前正在编辑的部门在外
        existCodeList = existCodeList.filter(item => item !== curCode)
      }
      //2. 在已经存在的部门做判断
      if (existCodeList.includes(value)) {
        callback(new Error(value + `编码被占用了`))
      } else {
        callback()
      }
    }
    
    //部门名字校验
    const validName = (rule, value, callback) => {
      // 找到当前添加部门的同级部门名称
      let existNameList = this.originList.filter(item => item.pid ===     this.pid).map(item => item.name)
      if (this.isEdit) {
        // 编辑时: this.pid保存的是当前父组件中被点击的部门的id
        // 被占用的部门名字 = 当前被编辑的部门的同级部门 - 当前被编辑的部门
        // (1) 根当前的部门的id, 找到pid
        const obj =  this.originList.find(item => item.id === this.pid)
        // 当前被编辑的部门的同级部门 - 当前被编辑的部门
        existNameList = this.originList.filter(item => item.pid === obj.pid && item.id !== this.pid).map(item => item.name)
      }
      //2. 在已经存在的部门做判断
      if (existNameList.includes(value)) {
        callback(new Error(value + `名字被占用了`))
      } else {
        callback()
      }
    }