用Vue做后台管理系统时常用的自定义校验

 场景：用Vue做后台管理系统时常用的自定义校验。对tree型数据中同级名称不能相同，编码不能重复进行自定义校验

data() {
  const validCode = (rule, value, callback) => {
      // 添加时的校验：code不能重复
      let existCodeList = this.originList
      if (this.isEdit) {
        // 编辑时的校验: code能取自己
        existCodeList = this.originList.filter(item => item.id !== this.formData.id)
      }
      existCodeList.map(it => it.code).includes(value) 
        ? callback(new Error(value + '已经占用')) 
        : callback()
    }

    const validName = (rule, value, callback) => {
      // 添加时的校验： 名字不能取子元素的名字
      let existNameList = this.originList.filter(item => item.pid === this.formData.pid)
      if (this.isEdit) {
        // 编辑时的校验： 名字不能取兄弟（排除自己）的名字
        // 找兄弟，排除自己
        existNameList = this.originList.filter(item => item.pid === this.formData.pid && item.id !== this.formData.id)
      }
      existNameList.map(it => it.name).includes(value) 
        ? callback(new Error(value + '已经占用')) 
        : callback()
    }
  
	return {
    // 省略其他
  	rules: {
        code: [{ message: '不能为空', required: true, trigger: 'blur' }, { validator: validCode, trigger: 'blur' }],
        name: [{ message: '不能为空', required: true, trigger: 'blur' }, { validator: validName, trigger: 'blur' }]
      },
      originList: [] // 在做校验时需要用到的数据
	}
}

在数据加载成功之后，对originList做初始化。

<script>

async loadPermissionList() {
      try {
        const res = await getPermissionList()
        console.log('获取权限数据', res)
+       this.originList = res.data.map(({ id, pid, name, code }) => ({ id, pid, name: name.trim(), code }))
        this.list = tranListToTreeData(res.data)
      } catch (err) {
        console.log(err)
      }
    }

</script>

name.trim()是为了清除后端返回的数据中的空格

<!-- 表单内容 -->
      <el-form
        ref="form"
        :model="formData"
+       :rules="rules"
        label-width="100px"
      >
        <el-form-item label="权限名称" 
+                      prop="name">
+           <el-input v-model.trim="formData.name" />
        </el-form-item>
        <el-form-item label="权限标识"
+                      prop="code">
+           <el-input v-model.trim="formData.code" />
        </el-form-item>

 使用校验时给表单添加 :rules="rules"，给要校验的添加prop,做兜底校验要用到ref

onSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.isEdit ? this.doEdit() : this.doAdd()
        }
      })