-
VeeValidate 官方文档
-
下载
npm 方式
npm install vee-validate --save
yarn 方式
yarn add vee-validate
-
使用
使用步骤
1.0 导入验证组件 ValidationProvider,以及 extend模块
2.0 按需导入验证规则(验证组件所提供的,入email,required)
3.0 根据具体情况选择 全局注册 还是 局部注册 的方式使用 验证组件
4.0 使用验证组件
<ValidationProvider name="email" rules="required|email" v-slot="{ errors }"> <input v-model="email" type="text"> <span>{{ errors[0] }}</span> </ValidationProvider>
全局注册组件(main.js)
import { ValidationProvider, extend } from "vee-validate"; import { required, email } from "vee-validate/dist/rules"; extend("email", { ...email, message:'请输入正确的邮箱地址' }); extend("required", { ...required, message: "必填" }); Vue.component('ValidationProvider', ValidationProvider);
局部注册组件(在组件内部注册 ,xxx.vue)
import { ValidationProvider, extend } from "vee-validate"; import { required, email } from "vee-validate/dist/rules"; extend("email", { ...email, message:'请输入正确的邮箱地址' }); extend("required", { ...required, message: "必填" }); //---------------------局部注册组件的方式------------------- export default { components: { ValidationProvider } }
-
自定义验证规则
<template> <ValidationProvider rules="secret" v-slot="{ errors }"> <input v-model="myword" type="text"> <span>{{ errors[0] }}</span> </ValidationProvider> </template> <script> // 导入依赖包 import Vue from 'vue'; import { ValidationProvider, extend } from 'vee-validate'; // Add a rule. extend('secret', { validate: value => value === 'example', message: 'This is not the magic word' }); export default { data(){ return { myword:'' } }, components: { ValidationProvider } } </script> <style> </style>
关于 vue项目中的表单验证组件(VeeValidate 3.x版本的使用)
猜你喜欢
转载自blog.csdn.net/weixin_42060658/article/details/104643252
今日推荐
周排行