vue 如何实现表单校验

下面是 "Vue 如何实现表单校验" 的完整攻略。

使用 Vue.js 实现表单校验

Vue.js 做为一款流行的前端框架，提供了很好的表单校验的支持。Vue.js 2.x 版本提供了 "v-model" 指令和 "validate" 方法，可以让我们快速方便地实现表单校验。

下面将介绍两个示例，来详细讲解 Vue.js 如何实现表单校验。

示例一：基础校验

以下示例演示了如何使用 Vue.js 的基础校验功能。代码如下：

<template>
  <div>
    <form @submit.prevent="onSubmit">
      <div>
        <label for="name">Name:</label>
        <input id="name" v-model="name" type="text" required />
        <div v-if="!name" class="error">Name is required.</div>
      </div>
      <div>
        <label for="email">Email:</label>
        <input id="email" v-model="email" type="email" required />
        <div v-if="!email" class="error">Email is required.</div>
        <div v-else-if="!isValidEmail(email)" class="error">Invalid email address.</div>
      </div>
      <div>
        <label for="phone">Phone:</label>
        <input id="phone" v-model="phone" type="text" />
        <div v-if="!isValidPhone(phone)" class="error">Invalid phone number.</div>
      </div>
      <button type="submit">Submit</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      email: '',
      phone: '',
    };
  },
  methods: {
    onSubmit() {
      if (this.isValidForm) {
        alert('Form is submitted.');
      }
    },
    isValidForm() {
      return !!this.name && this.isValidEmail(this.email) && this.isValidPhone(this.phone);
    },
    isValidEmail(email) {
      const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      return re.test(email);
    },
    isValidPhone(phone) {
      const re = /^\d{10}$/;
      return phone === '' || re.test(phone);
    },
  },
};
</script>

在上面的示例中，我们定义了一个名为 "isValidForm" 的方法，该方法返回一个布尔值，用于判断表单是否有效。

"isValidForm" 方法会判断输入的姓名、电子邮件和电话号码的格式是否正确。如果这些值都有效，则返回 "true"，否则返回 "false"。

在模板中，我们使用 "v-model" 指令来获取输入框的内容，使用 "required" 属性来指定输入框是必填项，并使用 "v-if"、"v-else-if"、"v-else" 指令来显示错误消息。

示例二：使用插件进行校验

以下示例演示了如何用插件进行表单校验。代码如下：

<template>
  <div>
    <form @submit.prevent="onSubmit">
      <label for="name">Name:</label>
      <input id="name" v-model="name" type="text" />
      <br>
      <label for="email">Email:</label>
      <input id="email" v-model="email" type="email" />
      <br>
      <label for="phone">Phone:</label>
      <input id="phone" v-model="phone" type="text" />
      <br>
      <button type="submit">Submit</button>
    </form>
  </div>
</template>

<script>
import Vuelidate from 'vuelidate';
import { required, email, numeric, minLength } from 'vuelidate/lib/validators';
export default {
  name: 'Form',
  data() {
    return {
      name: '',
      email: '',
      phone: '',
    };
  },
  directives: {
    Vuelidate,
  },
  validations: {
    name: { required },
    email: { required, email },
    phone: { numeric, minLength: minLength(10) },
  },
  methods: {
    onSubmit() {
      if (this.$v.$invalid) {
        alert('Please enter valid input(s).');
      } else {
        alert('Form is submitted.');
      }
    },
  },
};
</script>

在上面的示例中使用了 Vuelidate 插件，来进行表单校验。在模板中，我们使用 "v-model" 指令来获取输入框的内容，并在 data 属性中进行定义。

在 "validations" 属性中，我们定义了每个输入框所需的校验规则和类型。例如，"name" 输入框的校验方式为 "required"，"email" 输入框的校验方式为 "required" 和 "email"

最后，在 "onSubmit" 方法中，我们使用 "$v.$invalid" 判断是否输入了有效的值，如果无效，将弹出提示框。

这就是 Vue.js 实现表单校验的完整攻略，希望可以帮助您更好地完成您的表单校验需求。

阅读剩余 65%