如何使用 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

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>

Answer 2

我应用了@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();
},

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

How to implement form validation using a for loop and an array for errors

javascript

arrays

validation

vue.js