vue项目中用element ui中Form的自定义校验位置（包含多个表单循环校验）

  data() {
    // 表单验证自定义规则
    const validatePass = (rule, value, callback) => {
      // 如果为空
      if (value === '') {
        callback(new Error('请输入角色名称'))
      } else {
        // 进行表单遍历
        for (let i = 0; i < this.roleList.length; i++) {
          // 判断新添加的角色名字有没有重名
          if (this.roleList[i].roleName === value) {
            for (let j = i + 1; j < this.roleList.length; j++) {
              if (this.roleList[j].roleName === value) {
                callback(new Error('请勿输入重名'))
              }
            }
          }
        }
        callback()
      }
    }
    return {

data部分之中写校验规则

return之中role附上规则方法 

    formValidate() {
      // 每次调用都恢复默认表单通过校验
      this.mistakeRole = true
      // 对页面渲染数据进行循环，获取动态ref，依次进行表单校验
      for (let i = 0; i < this.roleList.length; i++) {
        this.$refs[`roleList${i}`].validate((valid) => {
        // 对表单校验结果进行区分
          if (valid) {
            console.log('通过校验')
          } else {
            this.mistakeRole = false
          }
        })
      }
      // console.log('通过校验', this.mistakeRole)
    },

多个表单同时校验，动态ref，循环调用，附上html的动态ref写法