javascript - 如何对每个字段从服务器到vue进行验证？

Question

我认为您需要传输一组错误并将它们分布在表单之间。每个字段将如何匹配错误？

this.$axios.post('signin', {
  user: {
    email: this.email,
    password: this.password,
  }
}).then(res => {


  if (res.data.success === false) {
    this.err_sn = res.data.message;
    console.log(res.data.message)

  }

Answer 1

您可以使用 .catch 捕获错误

 .then(response => {
    // replaced function with =>
    console.log(response.data);
    this.items = response.data; // `this.items =` inst. of `items =`
    })
    .catch(function(error) {
    console.log(error);
    });

从发布的链接更新

这是您发布的链接的服务器验证部分的片段。正如您所看到的，它们在表单顶部显示从服务器返回的错误 use <p v-if="errors.length"> .

<form
  id="app"
  @submit="checkForm"
  method="post"
>

  <p v-if="errors.length">
    <b>Please correct the following error(s):</b>
    <ul>
      <li v-for="error in errors">{{ error }}</li>
    </ul>
  </p>

  <p>
    <label for="name">New Product Name: </label>
    <input
      id="name"
      v-model="name"
      type="text"
      name="name"
    >
  </p>

  <p>
    <input
      type="submit"
      value="Submit"
    >
  </p>

</form>