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，提示红色边框

 

   
          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)
    }
}