Extjs4.x Vtype扩展实现验证密码和确认密码相等

原创:ITeye

1.扩展Vtype

  

//实现验证两次输入的密码一致
Ext.apply(Ext.form.VTypes, {   
     repetition: function(val, field) {        //返回true，则验证通过，否则验证失败   
         if (field.repetition) {               //如果表单有使用repetition配置，repetition配置是一个JSON对象，该对象提供了一个名为targetCmpId的字段，该字段指定了需要进行比较的另一个组件ID。   
             var cmp = Ext.getCmp(field.repetition.targetCmpId);   //通过targetCmpId的字段查找组件   
             if (Ext.isEmpty(cmp)) {          //如果组件（表单）不存在，提示错误   
                 Ext.MessageBox.show({   
                     title: '错误',   
                     msg: '发生异常错误，指定的组件未找到',   
                     icon: Ext.Msg.ERROR,   
                     buttons: Ext.Msg.OK   
                 });   
                 return false;   
             }   
             if (val == cmp.getValue()) {  //取得目标组件（表单）的值，与宿主表单的值进行比较。   
                 return true;   
             } else {   
                 return false;   
             }   
         }   
     },   
     repetitionText: '两次输入的密码不一致!'  
 }) 

2.用法

   

{
                fieldLabel:'<font color="red">密码</font>',
                allowBlank:false,
                inputType:'password',
                name:'pwd1',
                id:'pwd1',
                regex:/^d{6,16}$/,
                hideTrigger:true,
                xtype:'numberfield',
                regexText:"密码6-16位之间,且只能为数字!"
            },
            {
                fieldLabel:'<font color="red">确认密码</font>',
                allowBlank:false,
                inputType:'password',
                name:'pwd2',
                id:'pwd2',
                regex:/^d{6,16}$/,
                hideTrigger:true,
                xtype:'numberfield',
                regexText:"密码6-16位之间,且只能为数字!",
                vtype: 'repetition',  //指定repetition验证类型   
                repetition: { targetCmpId: 'pwd1' }  //配置repetition验证，提供目标组