为什么 element-ui 的 validate() 函数不断清除服务器端通过验证（通过错误属性）错误？

Question

我正在使用 element-ui 表单验证来验证客户端的简单规则，以减轻服务器的额外负载。在初始客户端验证通过后，我将它们发送到服务器并在服务器端进行更多（复杂）验证。

当我收到返回的错误并将它们显示在自定义 built 错误字段时，这没有任何问题。但是当尝试在 error prop 中使用 element-ui 的 built 来显示表单项中的错误时，然后在第二次提交后服务器端错误从表单项中消失。即使我像 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

在查看源代码后，我发现了这一点。 element-ui 验证对内部流程和外部 prop 错误使用相同的错误消息变量 (validateMessage)。因此，当 validate() 运行时，element-ui 首先检查自己的规则，如果通过则 returns valid true 否则它会创建错误并将它们分配给 validateMessage。

另一方面，传递手动错误元素 ui 正在使用监视错误 prop 的监视程序。

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

},

因此，为了控制分配给 validateMessage 的内容，需要触发观察者，这只能在 error 属性发生变化时触发，只要它保持不变，内部验证过程将覆盖 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;
            })
        }
    });
}

为什么 element-ui 的 validate() 函数不断清除服务器端通过验证（通过错误属性）错误？

why does element-ui's validate() function keep clearing server side passed validation (via error prop) errors?

javascript

vue.js

element-ui