1.给表单添加ref与:rules属性

对form表单的数据进行校验时，需要在el-form标签加上ref和:rules属性，并且在每个el-form-item标签里定义prop属性，prop属性对应:rules里面的每项规则，例如：

 <el-form ref="addData" :model="addData" label-width="100px" :rules="rules"> 
    <el-form-item label="标识名称" prop="name">
          <el-input v-model="addData.name" />
        </el-form-item>
        <el-form-item label="权限标识" prop="code">
          <el-input v-model="addData.code" />
        </el-form-item>

2.定义校验规则

在data里面定义rules属性值，validator 是自定义验证器 由于简单的校验并不能满足需求，所以需要自己额外定义一个校验规则

data() {
  returun {
		  rules: {
        //required 代表必填项   message 代表提示信息  trigger 代表 在什么时候触发校验
        name: [{ required: true, message: '标识名称不能为空', trigger: 'blur' },  
          { validator: validName, trigger: 'blur' }
        ],
        code: [{ required: true, message: '权限标识不能为空', trigger: 'blur' },
          { validator: validCode, trigger: 'blur' }
        ]
      }
  }
}

3.添加自定义校验规则

其中vulue是表单的值，callback是回调函数

//自定义校验 标识名称 
const validName = (rule, value, callback) => {
      // 添加时的校验： 名字不能取子元素的名字
      let existNameList = this.originList.filter(item => item.pid === this.addData.pid)
      //isEdit 是区分添加或编辑的状态 false表示是添加状态，true表示编辑状态
      if (this.isEdit) {
        // 编辑时的校验： 名字不能取兄弟（排除自己）的名字
        existNameList = this.originList.filter(item => item.pid === this.addData.pid && item.id !== this.addData.id)
      }
  		// 三元表达式
      existNameList.map(it => it.name).includes(value)
        ? callback(new Error(value + '已经占用'))
        : callback()
 }
	//自定义校验 权限标识
 const validCode = (rule, value, callback) => {
      // 添加时的校验：code不能重复   originList 是校验所需要的数据
      let existCodeList = this.originList
      if (this.isEdit) {
        // 编辑时的校验: code能取自己
        existCodeList = this.originList.filter(item => item.id !== this.addData.id)
      }
      existCodeList.map(it => it.code).includes(value)
        ? callback(new Error(value + '已经占用'))
        : callback()
    }