Vue.js中为多输入框添加非空校验条件的实现方法

核心思路 #

把三个日期字段整合到一个对象里，既方便统一校验，也能避免重复代码。同时通过提交触发校验状态，配合模板内的简洁判断，实现任意输入框为空时显示对应错误提示，不用给每个输入框单独写v-if。

修正后的完整代码 #

<script>
export default {
  data() {
    return {
      dateFields: {
        day: null,
        month: null,
        year: null
      },
      isSubmitted: false // 标记是否触发了提交操作
    };
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.isSubmitted = true;
      // 这里可以添加校验通过后的后续逻辑，比如接口提交
    }
  }
}
</script>

<template>
  <form @submit="handleSubmit">
    <div class="inputs">
      <!-- 循环渲染输入框，减少重复代码 -->
      <div v-for="(value, key) in dateFields" :key="key">
        <label :for="key.charAt(0).toUpperCase() + key.slice(1)">{{ key.charAt(0).toUpperCase() + key.slice(1) }}</label>
        <input 
          type="number" 
          :placeholder="key === 'day' ? 'DD' : key === 'month' ? 'MM' : 'YYYY'" 
          :id="key.charAt(0).toUpperCase() + key.slice(1)" 
          v-model="dateFields[key]" 
        />
        <!-- 一行逻辑实现校验：提交后字段为空则显示错误 -->
        <p class="empty-error" v-show="isSubmitted && !dateFields[key]">This field is required</p>
      </div>
    </div>
    <div class="submit">
      <button type="submit" class="submit-btn">
        <img src="../assets/images/icon-arrow.svg" alt="Submit" />
      </button>
    </div>
  </form>
</template>

关键说明 #

1. 修正绑定错误：原代码存在v-model绑定混乱的问题（比如Day输入框绑了years），这里用dateFields对象统一管理三个字段，避免绑定错误。
2. 循环渲染减少冗余：用v-for遍历字段对象，不用重复写三组输入框代码，后续维护更便捷。
3. 简洁校验逻辑：错误提示的显示逻辑v-show="isSubmitted && !dateFields[key]"就是核心，提交后只要对应字段为空就显示错误，无需为每个输入框单独编写判断。
4. 优化用户体验：通过isSubmitted状态控制，避免页面刚加载就弹出错误提示，符合常规表单交互逻辑。

若不想重构原模板 #

如果希望保留原模板结构，直接给每个错误提示添加对应判断即可：

<!-- Day输入框的错误提示 -->
<p class="empty-error" v-show="isSubmitted && !days">This field is required</p>
<!-- Month输入框的错误提示 -->
<p class="empty-error" v-show="isSubmitted && !months">This field is required</p>
<!-- Year输入框的错误提示 -->
<p class="empty-error" v-show="isSubmitted && !years">This field is required</p>

同时在script中添加isSubmitted变量和提交方法，逻辑和上述方案一致。

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