如何使用for循环和错误数组实现表单校验，解决非空输入也报错问题

问题核心错误点 #

你的代码存在3个逻辑问题导致校验失效：

• 遍历方法使用错误：filter是数组筛选方法，仅用来返回符合条件的新数组，不适合做遍历执行业务逻辑，应当使用forEach
• 参数理解错误：遍历general.learnings时拿到的第一个参数就是当前输入框的绑定值，你额外加的[index]属于多余操作，会导致取值永远为undefined
• 错误数组处理逻辑错误：每次校验前没有清空上一次的错误残留，且额外增加的else if分支只要遇到非空输入就清空错误数组，会直接覆盖已生成的空输入错误

修复后完整代码 #

<template>
    <form>
      <div v-for="(learning, i) in general.learnings" :key="i">
        <input
          type="text"
          v-model="general.learnings[i]"
          maxlength="120"
        />
        <!-- 优化：错误提示对应显示在对应输入框下方，更直观 -->
        <p style="background: red" v-if="errorList[i]">
          {{ errorList[i] }}
        </p>
      </div>
      <button @click="save">Save</button>
    </form>
</template>

<script>
export default {
  methods: {
    save(e) {
      // 每次校验前先清空上一次的错误
      this.errorList = []
      // 遍历所有输入项，判断是否为空
      this.errorList = this.general.learnings.map(val => {
        return val.trim() ? "" : "输入不能为空"
      })
      e.preventDefault();
    },
  },
  data() {
    return {
      errorList: [],
      general: {
        learnings: ["", ""],
      },
    };
  },
};
</script>

如果不需要每个输入框对应显示错误，要把所有错误集中展示，只要把save方法改成如下逻辑即可：

save(e) {
  this.errorList = []
  this.general.learnings.forEach(val => {
    if (!val.trim()) {
      this.errorList.push("输入不能为空")
    }
  })
  e.preventDefault();
}

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