学习VeeValidate 高阶组件

今天看文档的时候


发现还给我们提供了高阶组件,就是表单比较简单的时候可以使用,也可以和组合式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属性让表单或者某个和组件挂载好就立马触发校验

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

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

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容