Vue|Vue vee-validate插件的简单使用 Vuevee-validate插件的简单使用

1.安装
2.导入
3.定义校验规则(最好是在utils文件夹中单独封装js文件导出)
4.使用Form组件配置校验规则和错误对象 (form 和 Field都是从插件中按需导出)
5.使用 Field 组件，添加表单项目校验
6.补充表单数据和验证规则数据

【Vue|Vue vee-validate插件的简单使用】
1.安装

npm i vee-validate@4.0.3

2.导入

import { Form, Field } from 'vee-validate'

3.定义校验规则(最好是在utils文件夹中单独封装js文件导出)

// 创建js文件进行导出export default {// 校验项accountaccount (value) {if (!value) return '不能为空'// 条件判断,return true // 最后全部通过必须return true},password (value) {if (!value) return '请输入密码'if (!/^\w{6,24}$/.test(value)) return '密码是6-24个字符'return true},mobile (value) {if (!value) return '请输入手机号'if (!/^1[3-9]\d{9}$/.test(value)) return '手机号格式错误'return true},code (value) {if (!value) return '请输入验证码'if (!/^\d{6}$/.test(value)) return '验证码是6个数字'return true},isAgree (value) {if (!value) return '请勾选同意用户协议'return true}}

4.使用Form组件配置校验规则和错误对象 (form 和 Field都是从插件中按需导出)

// validation-schema="mySchema"配置校验规则// v-slot：导出错误对象

5.使用 Field 组件，添加表单项目校验

//1. 把input改成 `Field` 组件，默认解析成input//2. `Field` 添加name属性，作用是指定使用schema中哪个校验规则//3. `Field`添加v-model，作用是提供表单数据的双向绑定//4. 发生表单校验错误，显示错误类名`error`，提示红色边框

6.补充表单数据和验证规则数据

// 表单绑定的数据const form = reactive({account: null, // 账号password: null, // 密码isAgree: true // 是否选中})// 声明当前表单需要的校验数据规则const curSchema = reactive({account: schema.account, // 账号password: schema.password, // 密码isAgree: schema.isAgree // 是否选中})

以上就是Vue vee-validate插件的简单使用的详细内容，更多关于Vue vee-validate插件的资料请关注脚本之家其它相关文章！