vue.js - Vuelidate 服务器端验证

问题描述

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

例如，在用户输入电子邮件的注册表单email上，前端有一个unique验证器，后端有一个验证器。

如果后端失败，则错误消息将保存到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）。

    computed: {
        ...mapGetters('auth', ['requestErrorMessage']),
        emailErrors() {
            let errors = []
            const field = 'email'
            const serverError =
                Object.keys(this.requestErrorMessage).includes(field) &&
                this[field] === this.errorValues[field]

            if (!this.$v[field].$dirty) return errors
            !this.$v[field].email && errors.push('Must be valid email')
            !this.$v[field].required && errors.push('Email is required')
            if (serverError)
                errors = errors.concat(this.requestErrorMessage[field])
            return errors
        }
    },

所以上面的一切都按预期工作，但是在用户更改输入然后将其更改回 match 之前，错误是不可见的errorValues.email。换句话说，它似乎this.$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()
                }
            })
        }
    }

在没有用户手动修改输入的情况下，如何在返回承诺后显示服务器验证错误？

标签： vue.jsvuetify.jsvuelidate

只需要在调用之前为所有孩子$reset设置标志。$dirtyfalse$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()
            }
        })

vue.js - Vuelidate 服务器端验证

问题描述

解决方案

推荐阅读