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

【问题标题】：Model validation errors in the Ext JS 5.0 frameworkExt JS 5.0 框架中的模型验证错误
【发布时间】：2014-07-13 08:20:12
【问题描述】：

如何获得模型的验证错误，特别是在 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() 方法，但它不返回任何可以传递给表单组件的错误消息，并且没有明确的示例说明如何实现这一点。

【问题讨论】：

标签： javascript extjs extjs5

【解决方案1】：

我的配置总是与表单本身的验证器相反——这样Ext.form.Panel isValid 会根据需要自动标记相关字段。做你想做的事情是相当直接的，但是只需进行一些修改 - 预先警告 尽管 getValidation 返回一个私有实用程序类，可能会使代码容易受到框架未来版本的更改的影响。

首先，Ext.data.Model getValidation 返回一个 Ext.data.Validation 的实例，它本身就是一个简单的数据模型。它基本上是具有相应有效性的每个字段的键值映射 - 如果一个值是 strictly boolean 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() );
}

» demo / fiddle

还值得注意的是，如果您以这种方式验证模型，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';
    }
});

【讨论】：