`
floger
  • 浏览: 209406 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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
 
分享到:
评论

相关推荐

    Ext Js权威指南(.zip.001

    Ex4.0共2个压缩包特性,《ext js权威指南》 前 言 第1章 ext js 4开发入门 / 1 1.1 学习ext js必需的基础知识 / 1 1.2 json概述 / 3 1.2.1 认识json / 3 1.2.2 json的结构 / 3 1.2.3 json的例子 / 4 1.2.4 ...

    EXT2.0中文教程

    4.7.4. 自定义验证规则 4.7.5. 算不上校验的NumberField 4.8. 关于表单内部控件的布局问题 4.8.1. 什么都不做,默认的平铺布局 4.8.2. 分裂,分列 4.8.2.1. 分裂,分列。1.x 4.8.2.2. 分裂,分列。2.0 4.8.3. ...

    精通JS脚本之ExtJS框架.part1.rar

    《精通JS脚本之ExtJS框架》由浅入深地讲解了ExtJS在Web开发中的相关技术。本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计...

    Ext 开发指南 学习资料

    4.7.4. 自定义验证规则 4.7.5. 算不上校验的NumberField 4.7.6. 使用后台返回的校验信息 4.8. 关于表单内部控件的布局问题 4.8.1. 什么都不做,默认的平铺布局 4.8.2. 分裂,分列 4.8.3. fieldset是个神奇的东西 ...

    精通JS脚本之ExtJS框架.part2.rar

    《精通JS脚本之ExtJS框架》由浅入深地讲解了ExtJS在Web开发中的相关技术。本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计...

    EXT教程EXT用大量的实例演示Ext实例

    4.7.4. 自定义验证规则 4.7.5. 算不上校验的NumberField 4.8. 关于表单内部控件的布局问题 4.8.1. 什么都不做,默认的平铺布局 4.8.2. 分裂,分列 4.8.2.1. 分裂,分列。1.x 4.8.2.2. 分裂,分列。2.0 4.8.3....

    EXTJS 自定义月选择控件

    xtype : 'jxmonthfield' ...select:function(JXMonthField this, Array dates),当选定某些时间值(点击“确定”)时触发,传入参数:this,控件本身,dates,所选中的时间对象数组(不论是否支持多选)

    ExtJSWeb应用程序开发指南(第2版)

    4.2.3 自定义VType验证 4.3 表单的提交和加载 4.3.1 Ext.form.action.Action基础 4.3.2 Ajax模式的表单数据加载 4.3.3 Ajax模式的表单数据提交 4.3.4 标准模式的表单数据提交 4.3.5 使用Direct技术 4.4 本章...

    ExtAspNet_v2.3.2_dll

    -如何自定义Javascript脚本和C#处理函数来响应键盘事件。 -为Tree增加AutoLeafIdentification属性。 -增加示例(tree_auto_leaf_identification.aspx)(feedback:wdrabbit)。 +2009-11-17 v2.1.4 -修正...

    simplejee-面向j2ee初学者的开源项目

    javascript,css等,以及springmvc+jdbcTemplate和 struts2+hibernate+spring, struts2+ibatis+spring 实现的登陆,CRUD,jfreechart图表显示等例子,用来演示两个mvc框架的基本使用,拦截器,验证,View/Result的...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -如何自定义Javascript脚本和C#处理函数来响应键盘事件。 -为Tree增加AutoLeafIdentification属性。 -增加示例(tree_auto_leaf_identification.aspx)(feedback:wdrabbit)。 +2009-11-17 v2.1.4 -修正...

    轻松搞定Extjs_原创

    六、Ext.Element类中的动画函数 34 七、小结 35 第六章:元素操作与模板 36 一、重要也不重要的东西 36 二、Ext.DomHelper类 36 三、Ext.XTemplate 38 四、小结 39 第七章:格式化 40 一、用户需要优秀体验的内容 40...

    flarum-ext-popular-discussion-badge:根据回复或观看次数将热门徽章添加到讨论中

    根据自定义条件在讨论中添加“流行”徽章。 该扩展名可以在两个主要的“模式”中使用: 前端模式 此模式根据当前用户可以看到的信息来验证客户端的徽章条件。 完全不使用数据库列。 在前端模式下,可以使用以下...

    70款经典Dreamweaver插件

    compare_fields 用来验证表单内2个文本框的值是否相同,通常用来检验密码是否一致。并可以自定义抱错信息。 ASP Dream 很方便的插入ASP语句,具有向导模式 Ultra Close Window 直接关闭窗口,不弹出确认关闭的对话框 ...

    Dreamweaver 插件集

    用来验证表单内2个文本框的值是否相同,通常用来检验密码是否一致。并可以自定义抱错信息。 ASP Dream 很方便的插入ASP语句,具有向导模式 Ultra Close Window 直接关闭窗口,不弹出确认关闭的对话框 flat_button 用...

    .htaccess

    尽管.htaccess只是一个文件,但它可以更改服务器的设置,允许你做许多不同的事情,最流行的功能是您可以创建自定义的“404 error”页面。.htaccess 并不难于使用,归根结底,它只是在一个text文档中添加几条简单的...

Global site tag (gtag.js) - Google Analytics