Vue3 表单校验 [email protected]支持vue3.0

官网: https://vee-validate.logaretm.com/v4/ 支持vue3.0

---

1. 安装校验插件: npm i [email protected]

2. 导入校验组件 : import { Form, Field } from 'vee-validate'

3. 定义校验规则: 一般应用的表单校验可能多个地方都需要使用，所以我们有必要把所有的规则集中管理起来, 例如: 我放在了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
  }