javascript - extjs 6.2 现代形式添加自己的验证器

Question

如何在 extjs 6.2.0 现代应用程序中添加自己的表单验证器？经典:

validator : function(value){
    //do something
}    

Answer 1

这肯定取决于您想要什么，但例如我最近所做的是使用 ViewModel 绑定(bind)来添加验证器(似乎在经典和现代工具包中都适用)。对于您的需求来说，这肯定可能过于复杂，但看起来 ViewModel 与公式的绑定(bind)非常适合电子邮件验证。

表格:

Ext.define('App.login.LoginForm', {
    extend: 'Ext.form.Panel',

    requires: [ 'App.login.LoginModel' ],
    viewModel: {
        type: 'login'  // references alias "viewmodel.login"
    },

    layout: 'vbox',
    defaultType: 'textfield',
    items: [{
        name: 'login',
        itemId: 'login-fld',
        bind: '{credentials.login}'
    },{
        inputType: 'password',
        name: 'password',
        bind: '{credentials.password}'
    },{
        xtype: 'button',
        text: 'Submit',
        action: 'save',
        bind: {
            disabled: '{!isCredentialsOk}'
        }
    }]
});

View 模型:

Ext.define("App.login.LoginViewModel", {
    extend: "Ext.app.ViewModel", 
    alias: 'viewmodel.login',

    links: {
        credentials: {
            reference: 'App.login.LoginModel',
            create: true
        }
    },

    formulas: {
        isCredentialsOk: function (get) {
            return Boolean(get('credentials.login') && get('credentials.password'));
        }
    }

});

型号:

Ext.define('App.login.LoginModel', {
    extend: 'Ext.data.Model',

    fields: [
        {   name:   'login',    type: 'string', allowBlank: false   },
        {   name:   'password', type: 'string', allowBlank: false   }
    ],

    validators: [
        {   field: 'login',     type: 'presence',   message: 'Login empty'  },
        {   field: 'password',  type: 'presence',   message: 'Password empty'   }
    ]
});