私は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について読みましたが、プラグインにインポート/エクスポートする方法がわかりません
最後に私はここで答えを見つけました:
これは「バックエンド検証の処理」と呼ばれます
要するに答えは:
....
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)
}