extjs 6.2现代表单添加自己的验证器

Question

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

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

Answer 1

这无疑取决于你想要什么，但例如我最近的确是用添加验证与视图模型绑定（似乎是在古典和现代的工具包工作）。这肯定可能会因您的需要而过于复杂，但它看起来像ViewModel与公式的绑定非常适合电子邮件验证。

形式：

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}' 
     } 
    }] 
}); 

视图模型：

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' } 
    ] 
});