1.安装

npm i vee-validate@4.0.3

2.导入组件，注册为局部组件

  1. import { Form, Field } from 'vee-validate'
  3. components:{Form, Field}

3.基本结构

Form 就是表单， Field就是表单项

  1. <Form>
  2.       <Field v-model="formData.mobile" name="mobile" type="text" placeholder="请输入手机号" />
  3.       <Field v-model="formData.password" name="password" type="password" placeholder="请输入密码" />
  4. </Form>
  6.  // 以前的Field的位置是input

4.定义验证规则

整体用一个对象包起来，每条规则就是一个函数。具体格式如下：

  • 参数1：是要验证的值，参数2：是验证对象{field, form}
  • 返回值：true表示通过验证，返回字符串表示校验错误。
    1. const schema = {
    2. mobile (value) {
    3.   if (!value) return '请输入手机号'
    4.   if (!/^1[3-9]\d{9}$/.test(value)) return '手机号格式错误'
    5.   return true
    6. },
    7. password (value) {
    8.   if (!value) return '请输入密码'
    9.   if (!/\d{6}$/.test(value)) return '密码格式错误'
    10.   return true
    11. },
    12. isAgree (value) {
    13.   return value || '不答应可不行'
    14. }
    15. }

    5.使用规则

  1. 用Form去替换原来的form， 用Field去替换原input元素
    1. Form中要使用：ref, validation-schema, v-slot
      1. Field中设置v-model, name, class

  2. 补充dom结构来存放校验错误提示(在element, vant等组件库中，我们是不需要写的)

    1. <!--
    2. ref: 引用；后边手动兜底校验要使用
    3. validation-schema： 用来指定校验规则(这里的规则) 
    4. v-slot: 作用域插槽，如果校验失败，errors中会保存校验失败的结果
    5. -->
    6. <Form ref="target" :validation-schema="schema" v-slot="{errors}">
    7.        <!-- 省略其他 ... -->
    8.     <!-- 
    9.              Field: v-model：双向绑定数据项
    10.                           name：指定要校验的字段
    11.                          :class="{error:errors.mobile}" 如果校验失败，就补充error类
    12.              动态绑定class用来约定错误发生时的样子 -->
    13.    <Field 
    14.           v-model="formData.mobile" 
    15.           type="text" 
    16.           name="mobile"
    17.           placeholder="请输入手机号" 
    18.           :class="{error:errors.mobile}"
    19.     />
    20.        <!-- 约定显示校验错误结果 -->
    21.     <div class="error" v-if="errors.mobile">{{errors.mobile}}</div>
    23.     <!-- 省略其他 ... -->
    24.       <a @click="login()" href="javascript:;" class="btn">登 录</a>
    25. </Form>

    6.手动兜底校验

    1.  const target = ref(null) // 定义引用属性 <Form ref="target"
    2.  const login = () => {
    3.    // Form 组件提供了一个 validate 函数作为整体表单校验，返回的是一个promise
    4.    target.value.validate().then((res) => {
    5.      console.log('表单校验结果', res)
    6.    })
    7.  }

    7.学习使用-vee-validate-拓展使用

    7.1联合第三方组件

    ```javascript

  • ```

    7.2提取校验规则

    将schame全部提取出来，放在一个独立的文件中
    src/utils/validate.js ```javascript export const account = (value) => { if (value === ‘’) { return ‘用户名不能为空，请检查！’ } return true }

export const mobile = (value) => { if (!value) return ‘请输入手机号’ if (!/^1[3-9]\d{9}$/.test(value)) return ‘手机号格式错误’ return true }

export const password = (value) => { if (!value) return ‘请输入密码’ if (!/\d{6}$/.test(value)) return ‘密码格式错误’ return true }

export const isAgree = (value) => { return value || ‘不答应可不行’ }

  1. 使用：
  2. ```javascript
  3. import { account, isAgree } from '@/utils/validate'
  4. const schema = {
  5.       account: account,
  6.       isAgree: isAgree
  7.     }
  1. setup () {
  2.     // 省略其他 ...
  4.       const target = ref(null)
  6.     // 表单对象数据
  7.     const form = reactive({
  8.       isAgree: true,
  9.       account: null,
  10.       password: null,
  11.       mobile: null,
  12.       code: null
  13.     })
  14.     // 校验规则对象
  15.     const schema = {
  16.       account: schemaRules.account,
  17.       password: schemaRules.password,
  18.       mobile: schemaRules.mobile,
  19.       code: schemaRules.code,
  20.       isAgree: schema.isAgree
  21.     }
  22.     return { target, schema, formData}
  23. }