分享一个做表单验证的包vee-validate

文档：官方文档 支持vue3.0

第一步：安装

• 执行命令 npm i vee-validate@4.0.3

第二步：导入

• 修改文件 src/views/login/index.vue
  导入

import { Form, Field } from 'vee-validate'

<Form class="form" v-slot='{ errors }'>
  <template >
    <div class="form-item">
      <div class="input">
        <i class="iconfont icon-user"></i>
        <Field autocomplete='off' type="text" name='account' :rules="checkUname" placeholder="请输入用户名或手机号" />
      </div>
      //错误提示的div
      <div class="error" v-if='errors.account'><i class="iconfont icon-warning" />{{errors.account}}</div>
    </div>
  <template/>
</Form>

setup () {

  // 定义表单-用户名验证规则
const checkUname = (value) => {
  // value是将来使用该规则的表单元素的值
  // 1. 必填
  // 2. 6-20个字符，需要以字母开头
  // 如何反馈校验成功还是失败，返回true才是成功，其他情况失败，返回失败原因。
  if (!value) return '请输入用户名'
  if (!/^[a-zA-Z]\w{5,19}$/.test(value)) return '字母开头且6-20个字符'
  return true
}
  return { form, checkUname }
}

总结：

1. 安装依赖包
2. 导入Form和Field组件并使用
3. 在Field组件上通过rules属性绑定验证规则，并且必须有name属性，其值可以自定义
4. 通过Form组件的作用域插槽可以获取错误提示 errors.name属性值

第四步：使用Field组件上的rules属性验证表单域的规则

<Field autocomplete='off' type="text" name='account' v-model="form.account" :rules='checkUname' placeholder="请输入用户名或手机号" />

 // 表单数据
    const form = reactive({
    // 用户名
      account: null
      })

总结

1. 其实就是把input改成 Field 组件，默认解析成input

2. Field 添加name属性，作用是指定使用schema中哪个校验规则

3. Form 添加 v-slot="{errors}" 使用作用域插槽暴露 errors 错误对象

4. 通过 errors['校验规则名称'] 取出错误信息，有则显示，无即隐藏

第五步：如何校验 自定义组件 XtxCheckbox

• 修改文件 src/views/login/index.vue

-<XtxCheckbox v-model="form.isAgree" />
+<Field as='XtxCheckbox' name='isAgree' :rules='schema.isAgree' v-model="form.isAgree" />

• Field 的 as 属性可以指定为其他标签，也可指定为组件。

  • 但是组件需要支持 v-model 否则校验不会触发。

  第六步：如何清空表单和校验结果

//先给form绑定一个ref
<Form ref="target" class="form" v-slot="{errors}" 

// 清空表单
const target=ref(null)
const changeLogin = () => {
  // 清空之前的表单数据
  form.account = null
  // 调用Form组件的实例方法resetForm重置表单
  // resetForm不可以重置表单数据，但是可以重置错误提示
  target.value.resetForm()
}

• 首先需要自己手动清除数据，然后使用Form 组件提供 resetForm 方法对表单进行清除校验结果

第七步：如何整体表单校验

<a @click="handleLogin" href="javascript:;" class="btn">登 录</a>

// 触发登录
const handleLogin = async () => {
  // 手动进行表单验证
  const flag = await target.value.validate()
  if (flag) {
    // 验证通过
  }
}

return { form,  target, handleLogin }

总结：Form 组件提供 validate 方法对表单进行整体校验

注意：validate方法不支持回调，支持Promise的API