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