Ext JS 5.0 框架中的模型验证错误

Model validation errors in the Ext JS 5.0 framework

本文关键字：模型 验证 错误 框架 JS Ext      更新时间：2023-09-26

如何获取模型的验证错误，特别是在Ext JS 5.0中？ 与 4.2 版一样，我们这样做了：

var rec = Ext.create("ModelName", {...});
var errors = rec.validate();
if (!errors.isValid()) {
    form.markInvalid(errors);
}

但是，validate()现在在文档中标记为已弃用，调用它不再返回任何错误消息。 我已经查看了 5.0 中引入的 getValidation() 方法，但它不会返回任何可以传递给表单组件的错误消息，并且没有明确的示例说明如何实现这一点。

我一直以

相反的方式使用表单本身中的验证器进行配置-这样Ext.form.Panel isValid根据需要自动标记相关字段。 但是，只需进行一些修改即可执行所需的操作 - 请注意，尽管getValidation返回一个私有实用程序类，可能会使代码容易受到框架未来版本中的更改的影响。

首先，Ext.data.Model getValidation返回Ext.data.Validation的实例，该实例本身就是一个简单的数据模型。 它基本上是每个字段的键值映射，具有相应的有效性 - 如果一个值是严格的布尔值true那么该字段是有效的，其他任何东西，即string(错误消息(，那么该字段是无效的。 为方便起见，您可以编写一个函数，该函数将以您需要的格式返回错误 - 在此示例中，我已经覆盖了验证模型本身，但理想情况下，您将通过扩展或 mixin 将逻辑合并到您自己的模型中：

Ext.define('override.data.Validation', {
    override: 'Ext.data.Validation',
    getErrors: function(){
        var errors = [];
        Ext.iterate(this.getData(), function(field, value){
            if(true !== value) this.push({ id: field, msg: value });        
        }, errors);
        return errors;
    }    
});

然后修改上面的逻辑，如下所示：

var rec = Ext.create("ModelName", { /***/ });
if(!rec.isValid()){
    form.markInvalid( rec.getValidation().getErrors() );
}

» 演示/小提琴

还值得注意的是，如果您以这种方式验证模型，无论您是否设置值，Presence验证器似乎总是返回true(有效( - 大概是因为记录对象原型上将存在defaultValue？ 所以我在演示中加入了一个自定义验证器：

Ext.define('validator.NotEmpty', {
    extend: 'Ext.data.validator.Validator',
    alias: 'data.validator.notempty',
    validate: function(value){
        return !Ext.isEmpty(value) || 'Field must not be empty';
    }
});
相关文章：