文档：https://vee-validate.logaretm.com/v4/ 支持vue3.0
第一步：安装
执行命令 npm i vee-validate@4.0.3
第二步：导入
修改文件 src/views/login/index.vue
import { Form, Field } from 'vee-validate'
第三步：定义校验规则
新建文件 src/utils/vee-validate-schema.js
// 定义校验规则提供给vee-validate组件使用
export default {
// 校验account
account (value) {
// value是将来使用该规则的表单元素的值
// 1. 必填
// 2. 6-20个字符，需要以字母开头
// 如何反馈校验成功还是失败，返回true才是成功，其他情况失败，返回失败原因。
if (!value) return '请输入用户名'
if (!/^[a-zA-Z]\w{5,19}$/.test(value)) return '字母开头且6-20个字符'
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
}
}
提取目的 这些校验规则将来在其他表单验证时候可复用
第三步：使用 Form 组件，使用 vee-validate-schema 校验规则
修改文件 src/views/login/index.vue
-<div class="form">...</div>
+<Form class="form" :validation-schema="schema" autocomplete="off">...</Form>
import veeSchema from '@/utils/vee-validate-schema'
setup () {
// 控制短信登录切换的
const isMsgLogin = ref(false)
// 表单对象数据
const form = reactive({
isAgree: true,
account: null,
password: null,
mobile: null,
code: null
})
// 校验规则对象
const mySchema = {
account: schema.account,
password: schema.password,
mobile: schema.mobile,
code: schema.code,
isAgree: schema.isAgree
}
return { isMsgLogin, form, scheam:mySchema, submit }
}
第四步：使用 Field 组件，添加表单项目校验
修改文件 src/views/login/index.vue
<div class="form-item">
<div class="input">
<i class="iconfont icon-user"></i>
+ <Field :class="{error:errors.mobile}" v-model="form.mobile" name="mobile" type="text" placeholder="请输入手机号" />
</div>
+ <div class="error" v-if="errors.mobile"><i class="iconfont icon-warning" />{{errors.mobile}}</div>
</div>
<div class="form-item" v-if="!isMsgLogin">
<div class="input">
<i class="iconfont icon-lock"></i>
+ <Field :class="{error:errors.password}" v-model="form.password" name="password" type="password" placeholder="请输入密码" />
</div>
+ <div class="error" v-if="errors.password"><i class="iconfont icon-warning" />{{errors.password}}</div>
</div>
<div class="form-item" v-else>
<div class="input">
<i class="iconfont icon-code"></i>
+ <Field :class="{error:errors.code}" v-model="form.code" name="code" type="password" placeholder="请输入验证码" />
<span class="code">发送验证码</span>
</div>
+ <div class="error" v-if="errors.code"><i class="iconfont icon-warning" />{{errors.code}}</div>
</div>
<Form class="form" :validation-schema="schema" v-slot="{errors}"
其实就是把input改成 Field 组件，默认解析成input
Field 添加name属性，作用是指定使用schema中哪个校验规则
Form 添加 v-slot="{errors}" 使用作用域插槽暴露 errors 错误对象
通过 errors['校验规则名称'] 取出错误信息，有则显示，无即隐藏
第五步：如何校验 自定义组件 XtxCheckbox
修改文件 src/views/login/index.vue
-<XtxCheckbox v-model="form.isAgree" />
+<Field as="XtxCheckbox" name="isAgree" v-model="form.isAgree"/>
Field 的 as 属性可以指定为其他标签，也可指定为组件。
但是组件需要支持 v-model 否则校验不会触发。
第六步：如何在切换 短信 与 账户 登录时候清空表单和校验结果
修改文件 src/views/login/index.vue
<Form ref="formCom" class="form" :validation-schema="schema" v-slot="{errors}"
// 切换表单元素，还原数据和清除校验效果
const formCom = ref(null)
watch(isMsgLogin, () => {
// 还原数据
form.isAgree = true
form.account = null
form.password = null
form.mobile = null
form.code = null
// 补充校验效果清除，Form组件提供resetForm()
formCom.value.resetForm()
})
首先需要自己手动清除数据，然后使用Form 组件提供 resetForm 方法对表单进行清除校验结果
第七步：如何整体表单校验
修改文件 src/views/login/index.vue
<a @click="login()" href="javascript:;" class="btn">登 录</a>
// 需要在点击登录的时候对整体表单进行校验
const login = async () => {
// Form组件提供了一个 validate 函数作为整体表单校验，当是返回的是一个promise
const valid = await formCom.value.validate()
console.log(valid)
}
return { isMsgLogin, form, schema: mySchema, formCom, login }
Form 组件提供 validate 方法对表单进行整体校验
网友评论