确认密码验证器ExtJs 4

时间:2012-03-14 15:30:09

标签: extjs4

我想添加一个简单的验证器来验证“密码”和“确认密码”是否相等,这里是代码:

Ext.apply('Ext.form.VTypes',{
password : function(val, field) {
    if (field.initialPassField) {
        var pwd = Ext.getCmp(field.initialPassField);
        return (val == pwd.getValue());
    }
    return true;
},

passwordText : 'Passwords do not match'
});
var genders = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
    {"abbr":"AL", "name":"Male"},
    {"abbr":"AK", "name":"Female"}        
]
});

//****************************************
Ext.define('AM.view.user.Inscription', {
    extend: 'Ext.form.Panel',
    alias: 'widget.inscription',
    title: 'Formulaire',
    fieldDefaults: {
        labelAlign: 'right',
        msgTarget: 'side'
    },
      items: [{
        xtype: 'container',
        anchor: '100%',
        layout:'column',
        items:[{
                xtype:'textfield',
                fieldLabel: 'First Name',
                name: 'first',
                allowBlank:false,
                anchor:'40%',
                //maxLength : '10'
            },{
                xtype:'textfield',
                fieldLabel: 'Last Name',
                name: 'last',
                allowBlank:false,
                anchor:'40%'
            },{
                    xtype:'textfield',
                inputType: 'password',
                fieldLabel:'Password',
                name:'pass',
                id : 'pass',
                allowBlank:false,
                anchor:'40%'
            },{
                xtype:'textfield',
                inputType: 'password',
                fieldLabel:'Confirm Password',
                name:'confirmPass',
                allowBlank:false,
        vtype : 'password',
        initialPassField : 'pass',
        //autoRender : true,
                anchor:'40%'
            }]
        },{
            xtype: 'container',
            columnWidth:.5,
            layout: 'anchor',
            items: [{
                xty pe:'combobox',
                fieldLabel: 'Sexe',
                store: genders,
                queryMode: 'local',
                displayField: 'name',
                allowBlank : false,
                name: 'gender',
                editable : false,
                anchor:'30%',

            },{
                xtype:'textfield',
                fieldLabel: 'N° Téléphone',
                name: 'phone',
                allowBlank:false,
                anchor:'40%'
            }]
        }]
    }],

    buttons: [{
        text: 'Save'
    },{
        text: 'Reset'
    },{
        text: 'Cancel'
    }]
});

我开始在确认密码文本字段中写道我在chrome开发人员工具中得到了这个: Uncaught TypeError: Object [object Object] has no method 'password'

有人可以告诉我我想念的是什么吗?提前谢谢你。

更新

应用程序是一个MVC应用程序,这个文件(上面的代码)在View文件夹中,我在app.js中调用这个视图,如下所示:

 Ext.require([
'Ext.panel.*',
'Ext.toolbar.*',
'Ext.button.*',
'Ext.container.ButtonGroup',
'Ext.layout.container.Table'
]);
Ext.application({
name: 'AM',
appFolder: 'app',
controllers: [
    'Users'
],
launch: function() {
   Ext.create('Ext.container.Viewport', {
       layout : 'auto',
       //layout : 'vbox',
       renderTo: document.body,
        items: [{
            xtype : 'usertoolbar',
        },{  
            html : '<br><br>' 
        },{
            xtype: 'inscription',
        },{
            xtype: 'userlist',
    }]
    });
  }
});

欢迎任何有关我的代码构造方法的说明

3 个答案:

答案 0 :(得分:1)

在第一行中将Ext.form.VTypes更改为Ext.form.field.VTypes。看看它是否有帮助。

更新:将验证功能更改为:

password : function(val, field) {
    console.log(val, field);
    if (field.initialPassField) {
        var pwd = Ext.getCmp(field.initialPassField);
        console.log(pwd);
        return (val == pwd.getValue());
    }
    return true;
},

答案 1 :(得分:0)

Ext.form.VTypes更改为Ext.form.field.VTypes。并尝试删除'Ext.form.field.VTypes'周围的引号。 E.g:

Ext.apply(Ext.form.field.VTypes, {
password : function(val, field) {
    if (field.initialPassField) {
        var pwd = Ext.getCmp(field.initialPassField);
        return (val == pwd.getValue());
    }
    return true;
}

答案 2 :(得分:0)

解决方案是删除&#39; Ext.form.field.VTypes&#39;

周围的引号
Ext.apply(Ext.form.field.VTypes, {
    password: function (val, field) {
        if (field.initialPassField) {
            var pwd = Ext.getCmp(field.initialPassField);
            return (val == pwd.getValue());
        }
        return true;
    },
    passwordText: 'Passwords do not match'
});