学习VeeValidate 高阶组件处理表单

处理表单

vee Validate提供了很多方法去帮助开发者处理维护表单，提交重置等等

使用到目前为止发现一次v-model都没用到，因为使用这些高阶组件的好处就是省略了大量的js代码只用在模板上就可以构建完一个表单，<Field /> 字段组件实例创建内部模型来解决字段值更新问题，并跟踪它们，使它们与输入保持同步，当然也可以使用v-model但是vee validate并不需要

可以通过从作用域插槽里拿到values当前表单的值

Form组件会把表单的值作为第一个参数传递给绑定的函数

如果有更复杂的需求也可以从作用域管道里拿一些工具来使用

1.handleSubmit：在任何时候都自动阻止本地提交，用于 AJAX 提交

2.submitForm:只要表单无效，就会阻止本地提交，用于本地提交

3.validate:触发表单所有字段的验证

还有一个isSubmitting可以告诉我们表单是否正在提交中，在表单的提交loading或者禁用按钮的时候我们就可以用到了

注意在调用validate时不会触发只有handleSubmit和submitForm才会触发

submitCount 是表示用户提交的次数也可以拿来使用代码就没写了

有时候在用户提交的时候没通过校验，我们想采取一些行动比如发现email没有通过给他聚焦我们可以通过invalid-submit事件

在这个函数里就可以写一些校验失败提交未通过的逻辑

处理初始值

组件不需要使用v-model值我们可以直接定义一个对象交给他的初始化属性

setFieldValue 接受两个参数第一个是字段名第二个是字段值

setValues 整个表单的值

也可以在提交函数里通过第二个参数actions设置

也是通过作用域插座拿到重置函数进行调用

也可以在提交函数里通过actions里面的方法操作

也可以重置特定的字段

和设置字段值一样也可以通过提交函数的actions或者作用域插槽里获取修改error的方法

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