elementui form表单el-form-item使用v-show控制显示隐藏，在提交时 rules 验证错误的问题

《消除 Element UI 表单验证的"隐形"问题》：让你的表单规矩点，别太作

你是否在使用 Element UI 创造出来的复杂表单中感到困惑，仿佛一些表单项像害羞的孩子一样，藏在安全毯（display:none）后面，而你的表单还要去和他们打交道？🧐️ 实际情况就是这样：即使这些表单项藏起来了，验证规则也会被应用在他们身上，好像你的表单有超能力，能“看到”这些隐藏的元素似的！👀

令人头疼，对吧？😖️ 但不要担心，我将会指引你如何化解这个难题，让你的表单像个正常的，没有超能力的宝贝一样行事。👌️

哎呀妈呀，这bug有点离谱呢！🤪️

问题的病根所在

首先，我们要探究一下问题的根源。这个情况的罪魁祸首就是 Vue 的 v-show 指令。v-show 只是改变元素的 CSS display 属性，而不是彻底从 DOM 中消灭它们。所以，你的表单在进行验证的时候，会包括那些你隐藏的元素，毕竟他们在 DOM 中还是存在的，表单就像有了超能力，能“看到”这些隐藏的元素。

解决策略一：招募 v-if 加入我们的队伍

为了应对这个问题，我们可以请来我们的第一个超级英雄——v-if 指令！他和 v-show 的工作方式完全不一样。v-if 只有在它的表达式值为 true 的时候才会渲染元素。这意味着，如果表达式值为 false，元素就会从 DOM 中消失。结果就是，你的表单就看不到这些隐藏的元素了，他们就像真的消失了一样。💨️

然而，v-if 也有自己的 Achilles’ heel。它会在每次切换时销毁和重建元素，而不是像 v-show 那样只是切换元素的可见性。如果你的表单项包含大量数据或复杂的逻辑，并且需要频繁切换，那么使用 v-if 可能会让你的应用的性能像被 Kryptonite 攻击一样下降。📉️

<template>
  <el-form ref="form" model="form" label-width="80px">
    <el-form-item v-if="displayUsername" prop="username" label="Username">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <!-- Other form items -->
    <el-button type="primary" @click="submitForm">Submit</el-button>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        // Other form data
      },
      displayUsername: true,
    };
  },
  methods: {
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  },
};
</script>

作为一个开发，在解决问题时需要考虑代码的各个方面。在面对 Element UI 表单验证错误的问题时，这就涉及到了理解 Vue 指令如 v-show 和 v-if 的行为。

你已经知道，在 Vue 中，v-show 仅仅是改变元素的 CSS display 属性，无论它的表达式的值是真还是假，对应的 DOM 元素总是会被渲染出来。这就意味着，即使你在视觉上隐藏了某个表单项，它仍然存在于 DOM 结构中，并且会被 Element UI 的表单验证规则检查。

另一方面，v-if 的行为则完全不同。它会根据它的表达式的值来决定是否渲染对应的元素。如果表达式的值为假，那么对应的元素就不会被渲染到 DOM 中。因此，被 v-if 控制并且未被渲染的表单项就不会被表单验证规则检查。

因此，当面临 Element UI 表单验证错误的问题，你可能会想到 v-show 是一个可能的原因。如果你的表单项是用 v-show 控制显示和隐藏的，那么这可能就是问题的关键所在。这个思路是由对 Vue 和 Element UI 的理解和经验引导的，也是问题解决的一部分。

总的来说，作为开发者，我们的目标是理解我们使用的工具和框架的行为，以便我们能够有效地解决问题。理解 v-show 和 v-if 的行为及其对表单验证的影响就是这个过程的一个例子。

解决策略二：动态规则，变幻莫测

好了，如果你对 v-if 的副作用感到担忧，我们还有另一位超级英雄——动态规则！这个策略就像给你的表单项穿上了隐形斗篷，让表单的超能力失效。🦹‍♂️

你可以创建一个计算属性来返回当前应用于表单的规则，并在 el-form 的 rules 属性中使用这个计算属性。当你隐藏某个表单项时，你可以更新这个计算属性以移除对应的验证规则。

但请注意，这种策略可能需要你手动管理你的表单状态，就像个狡猾的魔法师一样。根据你的具体需求，v-if 可能是更简单、更直观的解决方案。🧙‍♂️

<template>
  <el-form ref="form" :model="form" :rules="formRules" label-width="80px">
    <el-form-item prop="username" label="Username">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <!-- Other form items -->
    <el-button type="primary" @click="submitForm">Submit</el-button>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        // Other form data
      },
      displayUsername: true,
    };
  },
  computed: {
    formRules() {
      let rules = {
        // Other rules
      };
      
      if (this.displayUsername) {
        rules.username = [
          { required: true, message: 'Please input username', trigger: 'blur' },
        ];
      }
      
      return rules;
    },
  },
  methods: {
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  },
};
</script>

最后，我们来回顾一下

那么，这就是我们如何解决 Element UI 表单验证的 “隐形” 问题的手法。无论你选择使用 v-if 还是动态规则，我都希望这篇文章能帮助你让你的表单行为更加正常，不再有那些令人困扰的超能力。

有时候，当你在与你的表单搏斗时，问题可能并不在你，而在你正在使用的工具。就像我们今天讨论的问题一样，知道如何正确地使用你的工具，以及他们的局限性，可以帮助你更有效地解决问题。

下次当你遇到类似的问题时，别急着质疑自己，而应该去积极寻找解决方案，就像你今天在这里做的一样。无论如何，保持好奇心，继续探索，祝你编程愉快！💻️😄️