2012-03-14 129 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' 
});