使用el-form自定义校验的同时使用v-if/v-show引起的校验问题

有时候需要根据不同的条件来回显具体的内容，这时候就会用到v-if/v-show，此时表单的校验就可能会出现一些问题。
比如：使用v-if的时候，明明切换到了另一个条件，但是对应元素的表单校验却没有生效；使用v-show的时候，明明隐藏了某个条件元素，但是该元素的表单校验却依旧存在。

<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  /*
  	使用v-if进行判断，当初始化的时候条件不满足，则不会被渲染。
  	而element-ui在对form表单中带有prop属性的子组件进行校验规则绑定时，
  	是在Vue声明周期mounted完成的，即就算后续改变了isShowPassWord值也不会实现表单校验。
  	此时只需要给对应的元素添加一个key值即可解决校验不生效的问题。
  */
  <el-form-item label="密码" prop="pass" v-if="isShowPassWord" key="pass">
    <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
  </el-form-item>
  /*
  	使用v-show进行判断，即使一开始不满足回显条件依旧会被渲染，只是看不见而已，
  	所以这时候当该组件没有值或者不满足被校验的条件时就会被校验住，不允许提交，
  	此时可以考虑换成v-if进行判断，或者进行自定义校验。
  */
  <el-form-item label="确认密码" prop="checkPass" v-show="isShowCheckPass">
    <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
  </el-form-item>
  /*
  	在实际应用中通常会有v-model和prop不相同的情况，这时候仍旧需要进行表单校验，则可以使用自定义校验。
  	在自定义校验中不论哪种情况都需要调用callback函数，否则则不会进行后续内容。
  */
  <el-form-item label="年龄" prop="age">
    <el-input v-model.number="ruleForm['age_value']" ref="ageValue"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>
<script>
  export default {
    data() {
      var checkAge = (rule, value, callback) => {
        /*
        	因为此时的v-model和prop的字段是不一样的，所以这里的value不再是该元素输入的内容了而是空。
        	这个时候可以通过获取元素或者使用ref进行对应元素的内容获取再进行相关的条件判断，然后决定是否通过校验。
        */
        const ageValue = this.$refs.ageValue.value
        if (!ageValue) {
          return callback(new Error('年龄不能为空'));
        }
        setTimeout(() => {
          if (!Number.isInteger(ageValue)) {
            callback(new Error('请输入数字值'));
          } else {
            if (ageValue < 18) {
              callback(new Error('必须年满18岁'));
            } else {
              callback();
            }
          }
        }, 1000);
      };
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      var validateCheckPass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.pass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        isShowPassWord: true,
        isShowCheckPass: true,
        ruleForm: {
          pass: '',
          checkPass: '',
          age_value: ''
        },
        rules: {
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ],
          checkPass: [
            { validator: validateCheckPass, trigger: 'blur' }
          ],
          age: [
            { validator: checkAge, trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

其他文章：
v-if/v-show中使用el-form表单校验，解决校验不生效的问题
Vue+Element中的 el-form-item 进行表单验证时 使用 v-if 出现的问题
vue el-form v-if 自定义表单校验失效