vue表单输入验证代码

以下是一个基本的 Vue 表单输入验证代码示例：

模板：

<template>
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" v-model="name" />
    <div v-if="nameError" class="error">{{ nameError }}</div>

    <label for="email">Email:</label>
    <input type="email" id="email" v-model="email" />
    <div v-if="emailError" class="error">{{ emailError }}</div>

    <button @click="submitForm">Submit</button>
  </div>
</template>

脚本：

<script>
export default {
  data() {
    return {
      name: "",
      email: "",
      nameError: "",
      emailError: ""
    };
  },
  methods: {
    submitForm() {
      this.nameError = "";
      this.emailError = "";

      if (!this.name) {
        this.nameError = "Please enter your name.";
      }

      if (!this.email) {
        this.emailError = "Please enter your email.";
      } else if (!this.validEmail(this.email)) {
        this.emailError = "Please enter a valid email.";
      }

      if (!this.nameError && !this.emailError) {
        // Form is valid, submit it
        console.log("Submit form with name:", this.name, "and email:", this.email);
      }
    },
    validEmail(email) {
      // Check if email is valid
      // Regex source: https://emailregex.com/
      const regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
      return regex.test(email);
    }
  }
};
</script>

样式：

<style>
.error {
  color: red;
}
</style>

在上面的示例中，我们有一个包含姓名和电子邮件输入的表单，并且在提交表单之前对用户输入进行验证。我们使用 `v-model` 指令来绑定表单输入值到 Vue 实例中的 `name` 和 `email` 数据属性。我们还定义了 `nameError` 和 `emailError` 数据属性来保存任何验证错误消息。

在 `submitForm` 方法中，我们首先清除任何现有的错误消息。然后，我们验证姓名和电子邮件输入是否为空，并对电子邮件进行基本的格式验证。最后，如果表单验证通过，我们可以提交表单。

在 `validEmail` 方法中，我们使用正则表达式来验证电子邮件地址的格式。