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

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值