关于前端:Vue-elform-表单验证的异常情况

本文针对的场景是没有手动触发 el-form 的 validator 验证，然而 async-validator 主动触发(验证)，控制台 async-validator 验证报错的状况。

先贴一段代码：

<template>
  <el-form ref="form" :model="formData" :rules="formRules" label-width="100px" size="medium">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="formData.username"></el-input>
    </el-form-item>
    <el-form-item label="明码" prop="password">
      <el-input type="password" v-model="formData.password"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm"> 提交 </el-button>
    </el-form-item>
  </el-form>
</template>
 
<script>
export default {data() {
    return {
      formData: {
        username: '',
        password: ''
      },
      formRules: {
        username: [{ required: true, message: '请输出用户名', trigger: 'blur'}
        ],
        password: [{ required: true, message: '请输出明码', trigger: 'blur'},
          {min: 6, max: 20, message: '明码长度在 6 到 20 个字符之间', trigger: 'blur'}
        ]
      }
    };
  },
  methods: {submitForm() {
      this.$refs.form.validate(valid => {if (valid) {
          // 表单验证通过，能够进行提交操作
          // ...
        } else {
          // 表单验证未通过
          return false;
        }
      });
    }
  }
};
</script>

这段代码中咱们在 submitForm 时通过 this.$refs.form.validate 来验证表单中的 username 和 password 字段，这没有问题。

el-from 验证调用了 async-validator，下面的状况是提交时手动触发 validator。

本文说的是没有手动触发 validator 验证，然而控制台 async-validator 报错 (async-validator 主动触发) 的状况。

当 el-from 上 rules 属性绑定的验证规定发生变化(即 :rules=”formRules” 中的 formRules 变更) 无论是 formRules 的对象内存地址变动，还是对象中的 key 或者 key 对应的 value 变更，都会触发 async-validator。

说个场景，如未满 18 岁用户须要验证监护人。用 computed 来做 rules 判断

computed: {formRules() {const basicRules = {...};
    if (age < 18) {
      return {
      ...basicRules,
      otherRules
      }
    }
    return basicRules;
  }
}

这时候来回切换用户信息，表单就会产生没有手动触发校验，但自行校验的状况。

解决这个问题有两种思路
1、拆分 rules 同时拆分表单，一个表单拆为两个表单，两个表单绑定两套验证规定
2、不拆分表单，但每次绑定值发生变化时，通过 clearValidate() 清空验证状态。

完结。

同步更新到本人的语雀
https://www.yuque.com/dirackeeko/blog/ih59cyi0r97kcnke