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
,提示红色边框
v-model="form.表单属性"
name="表单属性"
type="text"
:class="{ error: errors.表单属性}"
/>
{{ errors.表单属性}}
6:整体表单校验
通过ref获得表单组件对象
执行组件对象身上的validate方法 (执行完毕返回promise对象)
setup(){
async submit () {
const valid = await target.value.validate()
console.log(valid)
}
}