[JavaScript知识库]vue3 表单插件 vee-validate

1：安装校验插件vee-validate

???npm i vee-validate@4.0.3

2：导入校验组件

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

3：定义校验规则? 校验规则自定义

export default {
? // 校验account
? account (value) {
? ? if (!value) return '请输入用户名'
? ? 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组件配置校验规则和错误对象

validation-schema : 配置校验规则

v-slot：导出错误对象

? class="form"
? :validation-schema="mySchema"
? v-slot="{ errors }"
? autocomplete="off"
>
?

errors是固定的 当校验不通过的时候errors.表单元素 存放了错误信息提示 errors.表单元素有值 error类名存在就会显示一个红色的警示框

5：使用Filed组件 添加表单项目校验

• 把input改成 Field 组件，默认解析成input

• Field 添加name属性，作用是指定使用schema中哪个校验规则

• Field添加v-model，作用是提供表单数据的双向绑定

• 发生表单校验错误，显示错误类名error，提示红色边框

6：整体表单校验

????????通过ref获得表单组件对象

????????执行组件对象身上的validate方法 （执行完毕返回promise对象）

登 录

setup(){
? ? async submit () {
? ? ? const valid = await target.value.validate()
? ? ? console.log(valid)
? ? }
}