Question

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

例如，在用户输入电子邮件的注册表上，前端有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
        }
    },

因此，上述所有操作均按预期进行，但是直到用户更改输入然后将其更改回与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()
                }
            })
        }
    }

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

Answer 1

在调用request之前，只需$reset就将所有孩子的$dirty标志设置为false。

$touch

审核服务器端验证

1 个答案: