veeValidate 3.x + Nuxt js:将自定义错误推送到 ValidationObserver
veeValidate 3.x + Nuxt js: push a custom error to ValidationObserver
我正在使用 Nuxt js + veeValidate 3.x
我的插件是这样的:
import Vue from 'vue'
import {
ValidationObserver,
ValidationProvider,
extend
} from 'vee-validate'
import { required, email, min, confirmed } from 'vee-validate/dist/rules'
extend('required', {
...required,
message: 'This field is required'
})
extend('email', email)
extend('min', min)
extend('confirmed', confirmed)
Vue.component('ValidationProvider', ValidationProvider)
Vue.component('ValidationObserver', ValidationObserver)
作为插件添加到 nuxt.config.js
plugins: [{ src: '~/plugins/vee-validate.js', ssr: false }, ..
模板如下所示:
<ValidationObserver ref="registrationForm">
<ValidationProvider rules="required|email" name="Email Address" v-slot="{ errors }">
<div>
<input type="text" v-model.lazy="user.email"/>
<span class=form-errors">{{ errors[0] }}</span>
</div>
</ValidationProvider>
</ValidationObserver>
验证以这种方式完美地工作:
methods: {
async submit() {
const isValid = await this.$refs.registrationForm.validate()
if (isValid) {
this.register()
....
但是在 this.register()
的执行过程中,我可能会从 API 端得到一些错误(例如:错误:电子邮件已经存在)。如何将收到的错误推送到验证错误数组(如果有)? this.errors.add()
的旧方法(当然)不再起作用了。我读过有关 ErrorBag 的内容,但我只是不明白如何在插件中 import/export 它
终于在这里找到了答案:
称为"Handling Backend Validation"
简而言之,答案是:
....
this.$refs.registrationForm.setErrors({ email: ['Your email does\'t look good enough! Try again!'] })
...
将在输入字段下方显示错误
PS:如果您使用 Laravel 作为后端,错误处理将开箱即用:
// try,async stuff sending data to the endpoint
...
catch (error) {
this.$refs.registrationForm.setErrors(error.response.data.errors)
}
我正在使用 Nuxt js + veeValidate 3.x
我的插件是这样的:
import Vue from 'vue'
import {
ValidationObserver,
ValidationProvider,
extend
} from 'vee-validate'
import { required, email, min, confirmed } from 'vee-validate/dist/rules'
extend('required', {
...required,
message: 'This field is required'
})
extend('email', email)
extend('min', min)
extend('confirmed', confirmed)
Vue.component('ValidationProvider', ValidationProvider)
Vue.component('ValidationObserver', ValidationObserver)
作为插件添加到 nuxt.config.js
plugins: [{ src: '~/plugins/vee-validate.js', ssr: false }, ..
模板如下所示:
<ValidationObserver ref="registrationForm">
<ValidationProvider rules="required|email" name="Email Address" v-slot="{ errors }">
<div>
<input type="text" v-model.lazy="user.email"/>
<span class=form-errors">{{ errors[0] }}</span>
</div>
</ValidationProvider>
</ValidationObserver>
验证以这种方式完美地工作:
methods: {
async submit() {
const isValid = await this.$refs.registrationForm.validate()
if (isValid) {
this.register()
....
但是在 this.register()
的执行过程中,我可能会从 API 端得到一些错误(例如:错误:电子邮件已经存在)。如何将收到的错误推送到验证错误数组(如果有)? this.errors.add()
的旧方法(当然)不再起作用了。我读过有关 ErrorBag 的内容,但我只是不明白如何在插件中 import/export 它
终于在这里找到了答案:
称为"Handling Backend Validation"
简而言之,答案是:
....
this.$refs.registrationForm.setErrors({ email: ['Your email does\'t look good enough! Try again!'] })
...
将在输入字段下方显示错误
PS:如果您使用 Laravel 作为后端,错误处理将开箱即用:
// try,async stuff sending data to the endpoint
...
catch (error) {
this.$refs.registrationForm.setErrors(error.response.data.errors)
}