官网: https://vee-validate.logaretm.com/v4/ 支持vue3.0
-
安装校验插件: npm i vee-validate@4.0.3
-
导入校验组件 : import { Form, Field } from 'vee-validate'
-
定义校验规则: 一般应用的表单校验可能多个地方都需要使用,所以我们有必要把所有的规则集中管理起来, 例如: 我放在了src/utils/vee-validate-schema.js
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
}