Vue.js Vuelidate服务器端验证

我正在尝试结合前端和后端验证

例如，在用户输入电子邮件的注册表上，前端有一个

电子邮件

验证程序，后端有一个

唯一的

验证程序

如果后端出现故障，则错误消息将保存到

requestErrorMessage

中的存储中

{'email': 'A user with this email already exists.'}

请求中的电子邮件值也保存在

errorValues

字典中，以便在输入更改为其他值时自动删除错误

    mixins: [validationMixin],
    validations: {
        email: { required, email },
        password: { required, minLength: minLength(8) },
        password1: { required, sameAsPassword: sameAs('password') }
    },

    data() {
        return {
            email: '',
            password: '',
            password1: '',

            errorValues: {},
            errorFields: [
                'email',
                'password',
                'password1'
            ]
        }
    },

emailErrors（）

检查服务器是否有错误。如果存在，则会将其添加到任何现有错误中，但前提是输入值与发出请求时的值相同（存储在

errorValues

）

因此，上面的一切都按预期工作，但直到用户更改输入，然后将其更改回与

errorValues.email

匹配时，错误才可见。换句话说，它看起来像是

这个。$v.$touch（）

不起作用

    methods: {
        ...mapActions('auth', ['register']),
        handleSubmit() {
            const data = {
                email: this.email,
                password: this.password,
                password1: this.password1
            }
            this.register(data).then(success => {
                if (!success) {
                    Object.keys(this.requestErrorMessage).forEach(key => {
                        if (this.errorFields.includes(key)) {
                            this.errorValues[key] = this[key]
                        }
                    })
                    this.$v.$touch()
                }
            })
        }
    }

---

如果用户不手动修改输入，如何在承诺返回后显示服务器验证错误？

在调用

$touch

之前，必须

$reset

将

$dirty

标志设置为

false

    this.register(data).then(success => {
            if (!success) {
                Object.keys(this.requestErrorMessage).forEach(key => {
                    if (this.errorFields.includes(key)) {
                        this.errorValues[key] = this[key]
                    }
                })
                this.$v.$reset()
                this.$v.$touch()
            }
        })

    this.register(data).then(success => {
            if (!success) {
                Object.keys(this.requestErrorMessage).forEach(key => {
                    if (this.errorFields.includes(key)) {
                        this.errorValues[key] = this[key]
                    }
                })
                this.$v.$reset()
                this.$v.$touch()
            }
        })