Vue + Vee Validate 3 触发手动验证
Posted
技术标签:
【中文标题】Vue + Vee Validate 3 触发手动验证【英文标题】:Vue + Vee Validate 3 Trigger Manual Validation 【发布时间】:2020-02-29 05:51:36 【问题描述】:我的表单验证几乎可以工作了——我正在使用 Vee Validate 3 和 Vue.js。 Vee Validate 的大多数示例都是针对版本 2 的,所以我有点挣扎。
我遇到的问题是提交表单时触发验证。
如果我先单击文本字段以关注它,然后单击提交,验证会触发,我会看到错误消息。
但是,如果我不先单击文本字段并仅单击提交按钮,则看不到错误消息。
如何在点击提交之前不必专注于文本字段来完成这项工作?
更新
奇怪的是,控制台在两种情况下都显示错误TypeError: this.validate is not a function
- 无论验证是否有效。
<ValidationProvider rules="required" v-slot=" validate, errors ">
<div>
<input type="text" rules="required">
<p id="error"> errors[0] </p>
</div>
</ValidationProvider>
<script>
export default
methods:
async validateField()
const valid = await this.validate()
;
</script>
【问题讨论】:
我没有使用 v3.0 但是 1. 你能显示整个代码吗? 2.你检查ValidationObserver
了吗? logaretm.github.io/vee-validate/guide/…
@Adam,我会试试 ValidationObserver - 它看起来很有希望。我将在这里报告我的发现。谢谢
【参考方案1】:
Adam 通过 ValidationObserver 为我指明了正确的方向。
此代码对我有用...
<ValidationObserver ref="observer" v-slot=" invalid " tag="form" @submit.prevent="submit()">
<ValidationProvider rules="required" v-slot=" errors ">
<input type="text">
<p id="error"> errors[0] </p>
</ValidationProvider>
<button @click="submit()">Submit>/button>
</ValidationObserver>
<script>
import VslidationProvider, ValidationObserver from 'vee-validate'
import required from 'vee-validate/dist/rules'
export default
methods:
async submit ()
const valid = await this.$refs.observer.validate()
;
</script>
【讨论】:
【参考方案2】:新方法
<ValidationObserver v-slot=" handleSubmit ">
<ValidationProvider rules="required" v-slot=" errors ">
<input type="text">
<p id="error"> errors[0] </p>
</ValidationProvider>
<button @click="handleSubmit(onSubmit)">Submit>/button>
</ValidationObserver>
<script>
import VslidationProvider, ValidationObserver from 'vee-validate'
export default
methods:
onSubmit()
// ...
;
</script>
【讨论】:
以上是关于Vue + Vee Validate 3 触发手动验证的主要内容,如果未能解决你的问题,请参考以下文章
Vee-validate vue 3 setErrors 无法定义字段
在 vee-validate 中使用 axios 请求时,Vue 3 无法设置值