如何使用 for 循环和错误数组实现表单验证

Question

我想在按钮单击时检查输入是否为空。如果其中一个输入为空，我正在过滤一个数组。我正在尝试将错误添加到数组中以查找错误，我的任务是我只需要为那些为空的输入添加错误，但问题是即使对于那些不为空的输入也会添加错误。

<template>
    <form>
      <div v-for="(learning, i) in general.learnings" :key="i">
        <input
          type="text"
          v-model="general.learnings[i]"
          maxlength="120"
        />
      </div>
      <p
        style="background: red"
        v-for="(i, index) in errorList"
        :key="'A' + index"
      >
        {{ i }}
      </p>
      <button @click="save">Save</button>
    </form>
</template>

<script>
export default {
  methods: {
    save(e) {
      
      this.general.learnings.filter((e, index) => {
        if (!e[index]) {
          this.errorList.push("Error")

        } else if (e[index] !== "") {
          this.errorList = [""];
        }
      });
      e.preventDefault();
    },
  },
  data() {
    return {
      errorList: [],
      general: {
        learnings: ["", ""],
      },
    };
  },
};
</script>

我认为问题出在this.errorList.push("Error")你可以看看这个code in codesandbox你可以在输入中写一些东西按下删除后按下按钮然后再次按下你会看到一切都很好，我会很高兴如果有帮助

Answer 1

我应用了@flaxon 代码，其中错误只会显示在我的索引中，然后我稍微更改了save 方法中的验证检查

<div v-for="(learning, i) in general.learnings" :key="i">
      <input type="text" v-model="general.learnings[i]" maxlength="120" />

      <p style="background: red" :key="'A' + index">
        {{ errorList[i] }}
      </p>
    </div>

save(e) {
  this.errorList = [];
  this.general.learnings.filter((e, index) => {
    if (e === "") {
      this.errorList.push("Error");
    } else {
      return true;
    }
  });
  e.preventDefault();
},

Answer 2

https://codesandbox.io/s/happy-sun-8z8xg

我把p改成div，只显示那个索引的错误

<div v-for="(learning, i) in general.learnings" :key="i">
      <input type="text" v-model="general.learnings[i]" maxlength="120" />

      <p style="background: red" :key="'A' + index">
        {{ errorList[i] }}
      </p>
    </div>