如何在Vue 2表单验证中使用数组循环？

当然可以在表单验证中使用数组循环，你的代码验证失败是因为存在几个逻辑和语法问题，下面逐一说明并给出修正方案：

原代码存在的问题 #

1. 数组索引不匹配：你定义的firstname数组长度为2（索引0、1），但HTML中绑定了firstname[1]和firstname[2]，firstname[2]超出数组初始长度，会被Vue作为单独的响应式属性处理，而非数组元素，导致验证逻辑失效。
2. 计算属性逻辑错误：missfirstname计算属性的循环中，第一次循环就会执行return，无论是否检测到空值，都只会检查第一个元素，不会遍历所有输入框；且计算属性不应该修改data中的firstname_ErrMsg，这属于副作用操作，违背了计算属性的设计原则。
3. 错误提示显示逻辑错误：两个输入框的错误提示都绑定了同一个missfirstname条件，导致只要有一个输入框为空，两个错误提示都会显示，无法精准对应单个输入框的状态。

修正后的完整代码 #

script.js #

var app = new Vue({
  el: '#app',
  data: {  
    firstname: ['', ''], // 索引0对应firstname1，索引1对应firstname2
    firstname_ErrMsg: ['', ''],
    attemptSubmit: false
  },
  computed: {
    hasValidationError() {
      // 仅判断是否存在空值，不修改错误信息
      return this.firstname.some(item => item === '' && this.attemptSubmit);
    }
  },
  methods: {
    validateForm(e) {
      this.attemptSubmit = true;
      let isValid = true;
      // 循环验证每个输入框，更新对应错误信息
      this.firstname.forEach((name, index) => {
        if (name === '') {
          this.firstname_ErrMsg[index] = '不能为空';
          isValid = false;
        } else {
          this.firstname_ErrMsg[index] = '';
        }
      });
      if (!isValid) {
        e.preventDefault();
      }
    }
  }
})

index.html #

<div id="app">
  <form action='process.php' method="post" autocomplete="off" name="submit_form" v-on:submit="validateForm">    
    firstname1 : <input type='text' id='firstname1' name='firstname1' alt='1' v-model='firstname[0]'>
    <div v-if="attemptSubmit && firstname_ErrMsg[0]">{{firstname_ErrMsg[0]}}</div>     
    <br><br>
    firstname2 :    
    <input type='text' id='firstname2' name='firstname2' alt='2' v-model='firstname[1]'>
    <div v-if="attemptSubmit && firstname_ErrMsg[1]">{{firstname_ErrMsg[1]}}</div> 
    <br><br>         
    <input id="submit" class="preview_button" name="submit_form" type="submit">  
  </form>
</div>
<script src='https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js'></script>
<script src='js/script.js'></script>

关键调整说明 #

• 统一数组索引，让输入框绑定与数组索引一一对应；
• 将错误信息的更新移至validateForm方法中，计算属性仅负责判断整体是否存在验证错误；
• 每个输入框的错误提示单独绑定对应的错误信息和提交状态，确保提示精准；
• 使用Array.some()简化整体错误判断逻辑，使用Array.forEach()遍历数组完成批量验证。

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