日期:2014-05-16  浏览次数:20363 次

Ext JS 中实现自定义验证 密码修改 确认密码

EXT中有自带的验证,比如数字,EMAIL,URL等,这些验证都很好,只要加上VTYPE,指定验证的类型就可以使用了 

比如 
xtype:'textfield',
fieldLabel:'url',
vtype:'url',
vtypeText:'必须要以http://开头' 
当您填写的URL不是指定的路径就会出错了,错误的内容就是“必须要以http://开头'” 
如果创建自己的验证呢 
如下所示: 
Ext.apply(Ext.form.VTypes,{port:function(val,field){return checkPort(val.trim());}}); 
使用apply来附加验证类型到Ext.form.VTypes类里面,function(val,field)中的参数是规定好的 
val是value,是应用验证的控件获得的值 
field是对象,是当前应用的对象 
field.confirmTo是绑定的对象,比如用在密码验证上就很有用(一般需要填写,密码,确认密码),如下 
Ext.apply(Ext.form.VTypes,{password:function(val,field){if(field.confirmTo){var pwd=Ext.get(field.confirmTo);if(val.trim()==pwd.getValue().trim()){return true;}else {return false;}return false;}}}); 
使用如下: 
{
      xtype:'textfield',
      fieldLabel:'新密码',
      name:'operatorNewPass',
      id:'p_NewPassword',
      width:150,
      minLength:6,
      minLengthText:'密码长度最少6位!',
      maxLength:20,
      maxLengthText:'密码长度最多20位!',
      inputType:'password',
      allowBlank:false
     },{
      xtype:'textfield',
      fieldLabel:'确认密码',
      name:'operatorConPass',
      id:'p_ConfirmPassword',
      width:150,
      inputType:'password',
      vtype:'password',
            vtypeText:"两次密码不一致!",
            confirmTo:'p_NewPassword',      
            allowBlank:false
     } 
现在大家可以去创建自己的验证了,在使用验证时候,一定要申明消息模式 
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget='side'; 
 

//更改密码 
    changePassword = function(){ 
         Ext.apply(Ext.form.VTypes,{password:function(val,field){ 
                if(field.confirmTo){ 
                    var pwd=Ext.get(field.confirmTo);                   
                    if(val.trim()== pwd.getValue().trim()){ 
                        return true; 
                    } 
                    else 
                    { 
                        return false; 
                    } 
                    return false; 
                    } 
                } 
              }); 
        var CPFormPanel = new Ext.FormPanel({ 
            frame: true, 
            labelWidth: 75, 
            labelAlign: 'right',border:'0', 
            defaults: {width:160, xtype:"textfield",inputType:'password',allowBlank:false}, 
            items:[ 
                {fieldLabel:'输入旧密码',name:'OldPwd', maxLength:20,blankText : '密码为空!',maxLengthText:'密码长度不能超过20位!'}, 
                {fieldLabel:'输入新密码',name:'NewPwdOne',id:'NewPwdOne',maxLength:20,blankText : '密码为空',maxLengthText:'密码长度不能超过20位!'}, 
                {fieldLabel:'确认新密码',name:'NewPwdTwo',id:'NewPwdTwo',maxLength:20,blankText : '密码为空',maxLengthText:'密码长度不能超过20位!',vtype:'password',vtypeText:'两次密码不一致',confirmTo:'NewPwdOne'} 
            ] 
        });



本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/ttgzs/archive/2009/06/04/4239025.aspx
?