Vuelidate проверка на стороне сервера - PullRequest
Новая
       13

Vuelidate проверка на стороне сервера

1 голос
/ 03 апреля 2019

Я пытаюсь объединить проверку как внешнего, так и внутреннего интерфейса.

Например, в регистрационной форме, где пользователь вводит электронное письмо, на внешнем интерфейсе есть 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()
                }
            })
        }
    }

Как я могу получить сообщение об ошибке проверки сервера после возвращения обещания без изменения пользователем ввода вручную?

1 Ответ

2 голосов
/ 03 апреля 2019

Просто нужно было $reset, чтобы установить флаг $dirty для всех детей на false, прежде чем вызывать $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()
            }
        })
...