validation - Sencha Touch 2.1 - 使用模型进行表单验证

Question

我是 Sencha Touch 新手，正在尝试验证登录表单。我有一个简单的用户模型，有两个字段:电子邮件、密码。我创建了一些带有消息的验证规则:

Ext.define('FirstApp.model.User', {
    extend : 'Ext.data.Model',
    config : {
        fields : [{
            name : 'email',
            type : 'string'
        }, {
            name : 'password',
            type : 'password'
        }],

        validations : [{
            type : 'presence',
            name : 'email',
            message : "Enter email"
        }, {
            type : 'presence',
            name : 'password',
            message : "Enter Password"
        }, {
            type : 'format',
            name : 'email',
            matcher : /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/,
            message : "Wrong Email Format"
        }]
    }
}); 

在 LoginForm View 中，我想验证登录表单，但是当输入错误的参数时，警报弹出窗口显示未定义而不是消息。输入正确的数据后，表格将被发送。在这里您可以看到 LoginForm 代码:​​

Ext.define('FirstApp.view.login.LoginForm', {
    extend : 'Ext.form.FormPanel',
    xtype : 'loginpanel',
    requires : ['Ext.form.FieldSet', 'FirstApp.model.User', 'Ext.field.Email', 'Ext.field.Password'],

    config : {
        title : 'LOGIN',
        scrollable : 'vertical',
        items : [{
            xtype : 'fieldset',
            title : 'Login',
            defaults : {
                required : true,
            },
            items : [{
                xtype : 'emailfield',
                name : 'email',
                placeHolder : 'Email'
            }, {
                xtype : 'passwordfield',
                name : 'password',
                placeHolder : 'Password'
            }]
        }, {
            xtype : 'button',
            text : 'Log in',
            ui : 'confirm',
            handler : function() {
                var model = Ext.ModelMgr.create(this.up('formpanel').getValues(), 'FirstApp.model.User');

                var errors = model.validate(); console.log(errors);
                var message = '';

                if (errors.isValid()){
                    // Validation successful - show loader
                    Ext.Viewport.setMasked({
                        xtype:'loadmask',
                        message:'Logging in...'
                    });
                    // Login
                    this.up('formpanel').submit({
                        url: 'http://localhost/firstappweb/www/en/?do=login',
                        method: 'POST',
                        success: function(form, result) {
                            console.log(result);
                            Ext.Viewport.setMasked(false);
                        },
                        failure: function(form, result) {
                            console.log(result);
                            Ext.Viewport.setMasked(false);
                        }                       
                    });

                } else {
                    // Validation failed
                    console.log(errors.items);
                    Ext.each(errors.items, function(rec, i) {
                        message += rec.message+"<br />";
                    });
                    Ext.Msg.alert("Validate", message, function(){});
                    return false;
                }
            }
        }, {
            // Do not log in
            xtype : 'toolbar',
            docked : 'bottom',
            layout : {
                pack : 'center'
            },
            items : [{
                xtype : 'button',
                text : 'Do not log in',
                handler : function() {
                    Ext.Msg.alert("You do not want to log in?", 'Shame on you!', function() {
                    });
                    // this.push();
                }
            }]
        }]
    }
}); 

感谢您提前提供帮助。

Answer 1

我假设，既然您已经完成了 errors.items 的 console.log，您一定已经使用调试器看到了 rec.message 值，以了解为什么它未定义。

无论如何，这就是我会做的:

var data="";
errors.each(function (item, index, length) {
  // Each item in the errors collection is an instance of the Ext.data.Error class.
  data = data + '|'+item.getField()+' - '+ item.getMessage() +'|';
});
Ext.Msg.alert("Validation Failed", data);