VeeValidate教程

南雨北斗
965 阅读4分钟

一、安装 VeeValidate

  • 使用 npm 安装（推荐用于大多数项目） ：在项目根目录下的命令行中执行以下命令：

npm install vee-validate@next

这里的@next表示安装适用于 Vue 3 的版本。同时，通常还会安装一些常用的验证规则插件，比如：

npm install @vee-validate/rules

  • 使用 yarn 安装（如果你所在项目使用 yarn 管理依赖） ：

yarn add vee-validate@next

同样，对于验证规则插件可以使用：

yarn add @vee-validate/rules

二、基本配置

  1. 引入和配置 VeeValidate 核心
    在 Vue 项目的入口文件（通常是main.js或者main.ts）中，进行如下配置：

import { createApp } from 'vue';
import { createI18n } from 'vue-i18n';
import { createPinia } from 'pinia';
import App from './App.vue';
import { configure, defineRule } from 'vee-validate';
import { required, email } from '@vee-validate/rules';

// 定义验证规则
defineRule('required', required);
defineRule('email', email);

// 配置VeeValidate
configure({
  generateMessage: (ctx) => {
    const messages = {
      required: `The ${ctx.field} field is required.`,
      email: `The ${ctx.field} must be a valid email address.`,
    };
    return messages[ctx.rule.name] || `Invalid field ${ctx.field}`;
  },
});

const app = createApp(App);
const i18n = createI18n({});
app.use(i18n);
app.use(createPinia());
app.mount('#app');

上述代码做了以下几件事：

  • 首先引入了vee-validate的相关函数和常用验证规则（这里以required和email为例）。

  • 通过defineRule函数定义了具体的验证规则，将导入的验证规则和对应的名称关联起来，方便后续在表单验证中使用这些规则名称。

  • 使用configure函数对 VeeValidate 进行整体配置，这里重点配置了generateMessage函数，用于根据验证上下文（比如验证的字段、规则等信息）来生成对应的错误提示消息。

  1. 配置国际化（可选但常用）
    如果你的项目需要支持多种语言的错误提示，可以集成vue-i18n来实现国际化配置。示例如下：

import { createApp } from 'vue';
import { createI18n } from 'vue-i18n';
import { createPinia } from 'pinia';
import App from './App.vue';
import { configure, defineRule } from 'vee-validate';
import { required, email } from '@vee-validate/rules';

// 定义验证规则
defineRule('required', required);
defineRule('email', email);

// 配置VeeValidate
configure({
  generateMessage: (ctx) => {
    const messages = {
      required: `The ${ctx.field} field is required.`,
      email: `The ${ctx.field} must be a valid email address.`,
    };
    return messages[ctx.rule.name] || `Invalid field ${ctx.field}`;
  },
});

// 创建国际化实例
const i18n = createI18n({
  locale: 'en', // 设置默认语言，比如英文
  messages: {
    en: {
      validation: {
        required: 'This field is required.',
        email: 'Please enter a valid email address.',
      },
    },
    // 可以添加更多语言配置，例如中文
    zh: {
      validation: {
        required: '该字段必填',
        email: '请输入有效的邮箱地址',
      },
    },
  },
});

const app = createApp(App);
app.use(i18n);
app.use(createPinia());
app.mount('#app');

然后在configure函数中修改generateMessage部分，使其能根据当前语言环境获取相应的错误提示，示例如下：

configure({
  generateMessage: (ctx) => {
    const locale = i18n.global.locale.value;
    return i18n.global.t(`validation.${ctx.rule.name}`) || `Invalid field ${ctx.field}`;
  },
});

三、在组件中使用 VeeValidate 进行表单验证

  1. 简单的单个字段验证示例
    以下是一个验证单个输入框（比如验证邮箱输入是否符合要求）的组件示例：

<template>
  <form>
    <input v-model="form.email" name="email" placeholder="Enter your email" :class="{ 'is-invalid': errors.has('email') }" />
    <span class="invalid-feedback">{{ errors.first('email') }}</span>
  </form>
</template>

<script setup>
import { useForm } from 'vee-validate';

const { handleSubmit, errors, resetForm } = useForm({
  initialValues: {
    email: '',
  },
  validationSchema: {
    email: 'required|email',
  },
});

const onSubmit = handleSubmit((values) => {
  console.log('Submitted values:', values);
});
</script>

代码解析：

  • 通过useForm函数创建了与表单验证相关的一些工具函数和状态。initialValues用于设置表单初始值，这里将email字段初始化为空字符串。

  • validationSchema是关键部分，它定义了字段对应的验证规则，这里表示email字段需要同时满足required（必填）和email（符合邮箱格式）这两个规则，多个规则之间用|分隔。

  • 在模板中，通过errors.has('email')判断email字段是否有验证错误，有错误时添加相应的样式类（这里is-invalid类可以结合 Bootstrap 等 CSS 框架来显示错误样式），并通过errors.first('email')获取并显示该字段的第一条错误提示信息。

  • handleSubmit函数用于包装提交表单的回调函数，它会先进行表单验证，只有验证通过才会执行传入的实际提交函数（这里是将提交后的值打印出来）。

  1. 多个字段验证及表单整体提交示例

<template>
  <form @submit.prevent="onSubmit">
    <input v-model="form.username" name="username" placeholder="Enter your username" :class="{ 'is-invalid': errors.has('username') }" />
    <span class="invalid-feedback">{{ errors.first('username') }}</span>
    <input v-model="form.email" name="email" placeholder="Enter your email" :class="{ 'is-invalid': errors.has('email') }" />
    <span class="invalid-feedback">{{ errors.first('email') }}</span>
    <input v-model="form.password" name="password" placeholder="Enter your password" type="password" :class="{ 'is-invalid': errors.has('password') }" />
    <span class="invalid-feedback">{{ errors.first('password') }}</span>
    <button type="submit">Submit</button>
  </form>
</template>

<script setup>
import { useForm } from 'vee-validate';
import { required, email, minLength } from '@vee-validate/rules';

const { handleSubmit, errors, resetForm } = useForm({
  initialValues: {
    username: '',
    email: '',
    password: '',
  },
  validationSchema: {
    username: 'required',
    email: 'required|email',
    password: [required, minLength(6)], // 可以使用数组形式定义多个规则
  },
});

const onSubmit = handleSubmit((values) => {
  console.log('Submitted values:', values);
  // 这里可以添加实际的提交逻辑，比如发送AJAX请求等
  resetForm(); // 提交成功后重置表单
});
</script>

解释如下：

  • 在validationSchema中，为不同字段定义了不同的验证规则组合。比如password字段，要求是必填项并且长度至少为 6 个字符，通过minLength(6)这个规则来实现（需要提前导入minLength规则）。
  • 模板中针对每个输入框都做了类似的错误提示处理，根据errors对象来判断和显示相应错误信息。
  • onSubmit函数是表单提交的实际处理函数，它被handleSubmit包装，先验证表单，验证通过后执行实际的提交逻辑（这里简单打印提交值并重置表单，实际项目中可能是发送请求将数据提交到服务器等操作）。

四、自定义验证规则

除了使用内置的验证规则外，还可以方便地自定义验证规则，示例如下：

import { createApp } from 'vue';
import { createI18n } from 'vue-i18n';
import { createPinia } from 'pinia';
import App from './App.vue';
import { configure, defineRule } from 'vee-validate';
import { required, email } from '@vee-validate/rules';

// 自定义验证规则：验证是否是手机号码（简单示例，实际可能更复杂）
const isMobile = (value) => {
  return /^1[3-9]\d{9}$/.test(value);
};
defineRule('mobile', isMobile);

// 定义其他验证规则
defineRule('required', required);
defineRule('email', email);

// 配置VeeValidate
configure({
  generateMessage: (ctx) => {
    const messages = {
      required: `The ${ctx.field} field is required.`,
      email: `The ${ctx.field} must be a valid email address.`,
      mobile: `The ${ctx.field} must be a valid mobile number.`,
    };
    return messages[ctx.rule.name] || `Invalid field ${ctx.field}`;
  },
});

const app = createApp(App);
const i18n = createI18n({});
app.use(i18n);
app.use(createPinia());
app.mount('#app');

然后在组件的validationSchema中就可以使用这个新定义的mobile规则了，例如：

<template>
  <form>
    <input v-model="form.mobile" name="mobile" placeholder="Enter your mobile number" :class="{ 'is-invalid': errors.has('mobile') }" />
    <span class="invalid-feedback">{{ errors.first('mobile') }}</span>
  </form>
</template>

<script setup>
import { useForm } from 'vee-validate';

const { handleSubmit, errors, resetForm } = useForm({
  initialValues: {
    mobile: '',
  },
  validationSchema: {
    mobile: 'required|mobile',
  },
});

const onSubmit = handleSubmit((values) => {
  console.log('Submitted values:', values);
});
</script>

五、异步验证规则（例如验证用户名是否已存在等情况）

假设要验证用户名是否已存在（通过发送 API 请求到服务器来验证），示例代码如下：

<template>
  <form @submit.prevent="onSubmit">
    <input v-model="form.username" name="username" placeholder="Enter your username" :class="{ 'is-invalid': errors.has('username') }" />
    <span class="invalid-feedback">{{ errors.first('username') }}</span>
    <button type="submit">Submit</button>
  </form>
</template>

<script setup>
import { useForm } from 'vee-validate';
import { required } from '@vee-validate/rules';
import { ref } from 'vue';

const { handleSubmit, errors, resetForm } = useForm({
  initialValues: {
    username: '',
  },
  validationSchema: {
    username: [required, {
      async validator(value) {
        try {
          const response = await fetch(`/api/check-username?username=${value}`);
          const data = await response.json();
          return data.exists === false; // 如果服务器返回exists为false，表示用户名可用，验证通过
        } catch (error) {
          console.log('Error checking username:', error);
          return true; // 出现错误时，暂时认为验证通过，也可以根据需求做其他处理
        }
      },
    }],
  },
});

const onSubmit = handleSubmit((values) => {
  console.log('Submitted values:', values);
  resetForm();
});
</script>

这里在username字段的验证规则中添加了一个异步验证函数，它发送请求到服务器端（这里的/api/check-username只是示例接口，实际要替换为真实的后端接口），根据服务器返回的结果来判断用户名是否可用，进而决定该字段验证是否通过。

通过以上详细的教程步骤，你应该能够在 Vue 3 项目中熟练运用 VeeValidate 来进行各种表单验证需求了，无论是简单的格式验证还是复杂的异步验证以及国际化等场景都可以较好地应对。

avatar
文章
阅读
粉丝