vee-validate文档地址：https://vee-validate.logaretm.com/v4/

用vee-validate做表单校验

先安装vee-validate包

执行命令 npm i vee-validate@4.0.3

导入组件

  1. //导入组件
  2. import { Form , Field } from 'vee-validate'
  4. //在components中定义
  5. components:{Form , Field}
  7. //Form就是表单，Field就是表单项

在组件中使用

  1. <!--
  2.         ref: 引用；用于手动兜底校验
  3.         validation-schema： 用来指定校验规则(这里的规则) 
  4.         v-slot: 作用域插槽，如果校验失败，errors中会保存校验失败的结果
  5. -->
  6. <Form ref="target" :validation-schema="rules" v-slot="{errors}">
  7.           <!-- 省略其他 ... -->
  8.        <!-- Field:
  9.                               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. </Form>

定义校验规则

  1. //规则定义在一个js文件中，需要先导入
  2. import { code, mobile } from '@/utils/validate'
  3. //定义表单数据项
  4. const formData = reactive({
  5.       mobile: '',
  6.       code: ''
  7.     })
  8. // 校验规则
  9.    const rules = {
  10.       mobile: mobile,
  11.       code: code
  12.    }
  13. //导出规则
  14.      return {formData,rules}

规则

  1. // @/utils/validate.js 文件中的规则
  2. export const mobile = (value) => {
  3.   if (!value) return '请输入手机号'
  4.   if (!/^1[3-9]\d{9}$/.test(value)) return '手机号格式错误'
  5.   return true
  6. }
  7. export const code = (value) => {
  8.   if (!value) return '请输入手机验证码'
  9.   if (!/\d{6}$/.test(value)) return '手机验证码格式错误'
  10.   return true
  11. }

手动兜底校验

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

拓展-联合第三方组件使用

  1.  <XtxCheckbox v-model="form.isAgree" />
  2.  <Field as="XtxCheckbox" name="isAgree" v-model="form.isAgree"/>