简单实用的Vue表单验证，失败后自动回滚，维护起来也更轻松

2023-11-27 16:56:33

Vue.js 中的表单验证：全方位指南

什么是表单验证？

表单验证在前端开发中至关重要，它确保用户输入的数据准确无误。传统上，表单验证使用 HTML 表单和 JavaScript，但现在有了 Vue.js 等框架，表单验证变得更加轻松、灵活。

Vue.js 表单验证的步骤

1. 定义验证规则

使用 Vue.js 的内置指令 v-validate，我们可以定义验证规则。这些规则可以使用管道符 (|) 组合，例如：

<input type="text" v-model="username" v-validate="'required|alpha_num|min:6|max:16'">

上面的规则要求用户名必须是字母数字，长度在 6 到 16 位之间。

2. 应用验证规则

使用 <validation-provider> 组件在表单元素上应用规则：

<validation-provider rules="required|alpha_num|min:6|max:16">
  <input type="text" v-model="username">
</validation-provider>

3. 表单提交时的验证

当用户提交表单时，使用 $refs 获取表单元素引用并调用 validate() 方法进行验证：

methods: {
  submitForm() {
    this.$refs.form.validate().then((valid) => {
      if (valid) {
        // 表单验证成功，提交表单
        this.$refs.form.submit();
      } else {
        // 表单验证失败，显示错误信息并回滚表单
        this.showErrors = true;
        this.rollbackForm();
      }
    });
  }
}

4. 处理验证失败

如果验证失败，显示错误信息并回滚表单：

<template>
  <div>
    <form ref="form">
      <!-- 省略表单元素 -->

      <validation-errors v-if="showErrors"></validation-errors>

      <button type="submit" @click="submitForm">提交</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showErrors: false
    };
  },
  methods: {
    // 省略 submitForm 方法

    rollbackForm() {
      // 回滚表单
      this.$refs.form.reset();
    }
  }
};
</script>

自定义验证规则

Vue.js 允许自定义验证规则，以满足特定需求：

Vue.component('custom-rule', {
  props: ['value'],
  template: '<div></div>',
  methods: {
    validate(value) {
      // 自定义验证逻辑
      return true; // 或 false
    }
  }
});

<validation-provider rules="custom-rule">
  <input type="text" v-model="username">
</validation-provider>