почему функция element-ui validate () очищает серверную часть, прошедшую проверку (с помощью error prop)?

Question

Я использую проверку формы element-ui для проверки простых правил на стороне клиента, чтобы освободить сервер от дополнительной нагрузки. После первоначальной проверки на стороне клиента я отправляю их на сервер и делаю еще несколько (сложных) проверок на стороне сервера.

Это работает без проблем, когда я получаю возвращенные ошибки и отображаю их в пользовательских полях ошибок. Но когда вы пытаетесь использовать встроенную в element-ui опору ошибок для отображения ошибок внутри элемента формы, то после второй отправки ошибки на стороне сервера исчезают из элемента формы. Даже если я жестко закодирую сообщение об ошибке типа error="This is a error message", сообщение все равно исчезнет после запуска метода validate ().

вот образец формы

<el-form :model="form" :rules="rules" ref="form">
    <el-form-item prop="mobile_number" :error="errors.mobile_number[0]">
        <el-input v-model.number="form.mobile_number"> </el-input>
    </el-form-item>
</el-form>

и это та часть, где я отправляю форму

    submitForm(){
        this.$refs.form.validate((valid) => {
            if (valid) {
                axios.post(url, 
                    this.form
                ).then((response) => {
                    if(response.data.status == 'success'){
                        // do stuff when successful
                    }
                }).catch((error) => {
                    this.errors = error.response.data.errors;
                })
            }
        });
    }

Когда я удаляю метод validate () или когда я отключаю правила валидации на стороне клиента, сторона сервера остается. Как я могу решить эту проблему?

Answer 1

После просмотра источника я нашел это. Элемент validate ui использует одну и ту же переменную сообщения об ошибке (validateMessage) как для внутренних процессов, так и для внешних ошибок поддержки. Поэтому, когда validate () запускается, element-ui сначала проверяет свои собственные правила, а если он проходит, возвращает valid true, иначе он создает ошибку и назначает их в validateMessage.

С другой стороны, для передачи ручных ошибок элемент пользовательского интерфейса использует наблюдателя, который следит за пропуском ошибок.

watch: {
error: {
  immediate: true,
  handler: function handler(value) {
    this.validateMessage = value;
    this.validateState = value ? 'error' : '';
  }
},
validateStatus: function validateStatus(value) {
  this.validateState = value;
}

},

Таким образом, чтобы получить контроль над тем, что назначено для validateMessage, наблюдатель должен быть запущен, что может быть только тогда, когда реквизит ошибки изменяется до тех пор, пока он остается неизменным, внутренний процесс проверки будет перезаписывать validateMessage.

  validator.validate(model, { firstFields: true }, function (errors, invalidFields) {
    _this.validateState = !errors ? 'success' : 'error';
    _this.validateMessage = errors ? errors[0].message : '';

    callback(_this.validateMessage, invalidFields);
    _this.elForm && _this.elForm.$emit('validate', _this.prop, !errors, _this.validateMessage || null);
  });

В моем случае, поскольку проверка на стороне клиента проходит правила validateMessage установлен на "", поэтому ошибки не отображаются, даже если на стороне сервера все еще остаются ошибки.

Короче говоря, когда валидатор на стороне сервера проходит валидно, я очищаю свои локальные ошибки перед отправкой формы. И пусть он установит их снова, если таковые существуют. И это работает.

submitForm(){
    this.$refs.form.validate((valid) => {
        if (valid) {
            this.errors = [];
            axios.post(url, 
                this.form
            ).then((response) => {
                if(response.data.status == 'success'){
                    // do stuff when successful
                }
            }).catch((error) => {
                this.errors = error.response.data.errors;
            })
        }
    });
}