vee-validate 4.0.3 ,实现Vue3表单校验。

安装：

4.x版本适用于vue3, vue2需安装3.x版本。

npm i vee-validate@4.0.3

---

导入：

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

components: { Form, Field },

<Form>用来替换原生<form>, <Field>用来替换原生<input>

---

基本使用：

<Form :validation-schema="schema">
	<Field v-model="form.username" name="usernameFn" type="text" placeholder="请输入手机号" />
	<Field v-model="form.password" name="passwordFn" type="password" placeholder="请输密码" />
</Form>

必要属性

validation-schema属性值为包含校验规则函数的对象名。
v-model为双向绑定的表单数据，name属性值schema对象中对应的校验函数名。

---

定义数据和校验规则

// 定义表单数据
const form = reactive({
	 username: null,
     password: null,
})
// 定义校验规则
const schema = {
  usernameFn (value) {
    // 非空校验
    if (!value) return '用户名不能为空'
    // 字母开头,6-20字符之间
    if (!/^[a-zA-Z]\w{5,19}$/.test(value)) return '必须以字母开头，且为6-20个字符'
    return true
  },
  passwordFn (value) {
    // 非空
    if (!value) return '密码不能为空'
    // 6-24个字符
    if (!/\w{6,24}/.test(value)) return '密码为6-24个字符'
    return true
  }
return {form,schema}

参数value为需校验的表单值
函数返回值为true时通过，为字符串时则为不通过时的提示消息。

到此，在输入框失去焦点时便会自动校验，但并没有任何失败的提示消息，因此我们需完善功能。

---

校验失败提示

通过作用域插槽，<Form>可通过解构拿到errors对象给子节点使用。
errors.username即为校验函数中我们返回的错误文本消息，可通过v-if动态提示消息。

<Form :validation-schema="schema" v-slot="{ errors }">
	<Field v-model="form.username" name="usernameFn" type="text" placeholder="请输入手机号" />
	<!-- 用户名校验失败提示 -->
    <div v-if="errors.username">{{ errors.username }}</div>
	<Field v-model="form.password" name="passwordFn" type="password" placeholder="请输密码" />
	<!-- 密码校验失败提示 -->
    <div v-if="errors.password">{{ errors.password }}</div>
</Form>

整体校验和重置验证信息

为<Form>绑定ref属性，调用组件实例的方法。
formCom.value.validate() 整体校验。返回一个promise，为true时校验成功，false时失败。

<Form :validation-schema="schema" v-slot="{ errors }" ref="formCom">

const formCom = ref(null)
//整体校验
formCom.value.validate().then(valid => {
  if (valid) {
    console.log('校验通过')
  }
})

formCom.value.resetForm() 清除验证 ，直接调用即可。

formCom.value.resetForm()

---

可以发现vee-validate与element ui的表单验证思路基本相同。