2012-03-14 233 views
1

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

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

whene我在确认密码文本框开始写我得到这个在铬开发工具: Uncaught TypeError: Object [object Object] has no method 'password'

有人可以告诉我我在这里想念什么?先谢谢你。

UPDATE

的应用程序是一个MVC应用程序并将该文件(上面的代码)在查看文件夹,和我打电话的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', 
    }] 
    }); 
    } 
}); 

也欢迎关于我的结构代码方法的任何说明

回答

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; 
}, 
+0

现在我得到错误信息,当我加入“Ext.form.field.Vtypes”行情,但即使如此,这两个字段也是相同的! – Adil 2012-03-14 16:05:55

+0

由于某种原因,很可能无法获得原始字段。在验证功能中添加一些跟踪。 – sha 2012-03-14 16:30:42

+0

我添加了一些痕迹,但没有!你能否给我一个你想象中的痕迹的例子,可能我的方式不正确。 – Adil 2012-03-14 17:14:40

0

变化Ext.form.VTypesExt.form.field.VTypes。并尝试删除'Ext.form.field.VTypes'左右的报价。例如:

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; 
} 
0

的解决方法是删除围绕“Ext.form.field.VTypes”

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