Extjs 6.2现代形式增加了自己的验证器

extjs 6.2 modern form add own validator

本文关键字：增加 自己的 验证 Extjs      更新时间：2023-09-26

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

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

这当然取决于您想要什么，但例如，我最近所做的是使用与ViewModel的绑定添加验证器(似乎在经典和现代工具包中都有效)。对于你的需求来说，这肯定是过于复杂了，但看起来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}'
        }
    }]
});

ViewModel: 

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

相关文章：