今天看文档的时候

发现还给我们提供了高阶组件,就是表单比较简单的时候可以使用,也可以和组合式api结合使用,

最简单的示例,从依赖中导入了三个组件from field ErrorMessage,然后指定name字段名,然后自定义了一个校验函数没有值的时候提示必填

也可以使用yup这个非常优秀的校验库对我们上一个示例中的自定义函数做替换

更加简单了,具体可以看yup文档里面有很多校验函数,也可以自定义。
表单级别验证
vee-validate支持使用schema事先定义字段上的所有验证,这样就不必在字段上单独定义验证。如果正在创建大型表单,并希望模板更简洁,那么表单级验证就非常方便了。一个简单的验证模式可以是一个对象,其中包含作为键的字段名和作为键值的验证函数:
可以自定义校验逻辑

也可以结合yup使用

默认情况下校验器会在这些情况下执行
1.字段值更改后
发送/发出更改事件时
外部更改值(通过model update或其他)
2.规则更改后
仅在字段之前已通过用户交互验证的情况下
3.失去焦点
已经发出blur事件
4.提交表单后
自定义校验触发器
默认情况下会给字段添加多个事件监听器
1.input
2.change
3.blur
4.update:modelValue
可以使用configure函数对这些配置进行设置

也可以针对某一个field单独的配置

如果我们有更加灵活的需求也可以通过scope-slot拿到prop绑定到我们需要的组件或者事件里

通过组件包裹我们自己的input然后绑定里面的属性
还可以通过设置validate-on-mount属性让表单或者某个和组件挂载好就立马触发校验

也可以针对是否触发校验对函数进行配置

下篇文章继续说明如何展示错误信息