javascript - 如何使用 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")您可以在代码和框中查看此代码您可以在输入中写一些内容按删除后按按钮并再次按您会看到一切正常，如果有帮助我会很高兴

标签： javascriptarraysvue.jsvalidation

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();
},