Vue中v-if切换输入框后客户端表单验证失效问题

问题现象 #

带required和minlength="3"属性的input表单，初始提交时原生验证功能正常。但通过v-if指令移除并重新渲染输入框后，客户端原生验证失效：输入2个字符提交时，本该触发的验证警告不出现，表单直接通过验证。

复现步骤 #

• 输入2个字符，点击提交，可见原生验证警告
• 点击toggle按钮2次（先移除再重新渲染输入框）
• 再次提交，不符合规则的输入会被成功提交

复现代码 #

<script setup>
import { ref, reactive } from 'vue'

const form = reactive({ username: '' });
let h = ref(true);

async function tg(){
  h.value = !h.value;
}
</script>

<template>
  <form>
      <input v-if="h" v-model="form.username" type="text" required placeholder="ph" minlength="3" />
      <input type="button" @click="tg" value="toggle" />
      <button type="submit">SEND FORM</button>
  </form>
</template>

原因分析 #

Vue通过v-if重新渲染元素时，会复用已有DOM节点优化性能，但表单元素的原生验证状态未被正确重置，导致重新渲染后的input没有绑定正确的验证规则，或保留了异常的验证状态标记，最终使原生验证失效。

解决方案 #

方案1：添加唯一key强制创建新元素 #

给input添加与v-if绑定变量关联的key属性，让Vue每次切换时销毁旧元素并创建全新元素，确保新元素的原生验证规则被正确初始化：

<input v-if="h" v-model="form.username" type="text" required placeholder="ph" minlength="3" :key="h" />

方案2：手动控制表单验证流程 #

给表单添加ref，在提交时主动调用原生验证方法，强制触发验证逻辑：

<template>
  <form ref="formRef" @submit="handleSubmit">
      <input v-if="h" v-model="form.username" type="text" required placeholder="ph" minlength="3" />
      <input type="button" @click="tg" value="toggle" />
      <button type="submit">SEND FORM</button>
  </form>
</template>

<script setup>
import { ref, reactive } from 'vue'

const form = reactive({ username: '' });
let h = ref(true);
const formRef = ref(null);

async function tg(){
  h.value = !h.value;
}

function handleSubmit(e) {
  e.preventDefault();
  // 检查表单有效性
  if (formRef.value.checkValidity()) {
    // 验证通过，执行提交逻辑
    console.log('表单提交成功');
  } else {
    // 触发原生验证提示
    formRef.value.reportValidity();
  }
}
</script>

方案3：使用Vue表单验证库替代原生验证 #

使用如VeeValidate这类专为Vue设计的表单验证库，它能更好适配Vue的响应式系统，避免原生验证与Vue DOM复用机制的冲突问题。

内容的提问来源于stack exchange，提问作者padavan