`
floger
  • 浏览: 213890 次
  • 性别: 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做密码验证

    在提供的文件`pwdVerification.html`中,可能包含了使用ExtJS构建的密码验证UI,而`pwdValidate.js`很可能是实现验证逻辑的脚本。这个脚本可能会定义`validatePassword`函数,其中包含上述的复杂性和长度验证规则。...

    ext js 中文手册

    Ajax在Ext JS中是指通过异步JavaScript和XML技术实现与服务器的通信,从而使页面无需刷新即可更新数据或内容。Ext JS通过其Ajax组件和方法,支持各种请求和响应处理机制,大大提高了Web应用的交互性和用户体验。 ...

    EXT 表单验证EXT 表单验证

    3. **自定义vtype**:EXT JS允许开发人员创建自定义验证类型。这通常通过扩展`Ext.form.field.VTypes`类来完成,然后在vtype属性中使用新创建的函数名。例如,如果你需要验证一个密码强度,可以创建一个新的vtype并...

    Ext JS - JavaScript Library

    Ext JS 是一个强大的JavaScript库,专门用于构建富客户端Web应用程序。这个库以其丰富的用户界面组件、数据绑定功能和可扩展性而闻名。Ext JS 提供了一整套预先封装的组件,如表格、面板、菜单、按钮、表单、树形...

    修复Ext3.0.0中自定义分页的小bug

    Ext JS是一个流行的JavaScript库,主要用于构建富客户端Web应用程序,它的组件库包含了一个名为“paging toolbar”的工具,用于在数据网格中实现分页操作。这个小bug可能涉及到分页功能的逻辑错误、用户界面显示异常...

    Ext Vtype 表单验证实现登陆

    本篇文章将详细讲解如何利用Ext JS的Vtype(验证类型)来实现登录表单的验证功能。Ext JS是一个强大的JavaScript框架,提供了丰富的组件和功能,包括复杂的表单验证机制。 首先,理解Vtype的概念。Vtype是Ext JS中...

    ExtJS弹出密码输入框的js文件

    通过这个修改后的`Ext.MessageBox.prompt`,开发者可以更安全地在ExtJS应用程序中实现密码输入功能,而无需自己编写复杂的加密和验证逻辑。这种封装和复用代码的方式是软件开发中的最佳实践,可以提高代码的可维护性...

    Ext3.0实现多文件上传.rar

    Ext3.0是一种广泛使用的JavaScript库,主要用于构建富互联网应用程序(RIA)。在“Ext3.0实现多文件上传.rar”这个压缩包中,我们...通过学习和理解这个示例,开发者可以更好地掌握如何在自己的项目中实现类似的功能。

    Ext GridPanel 中实现加链接操作

    ### Ext GridPanel 中实现加链接操作 在前端开发领域中,Ext JS 是一款非常流行的 JavaScript 框架,用于构建企业级的 Web 应用程序。Ext GridPanel 是该框架中的一个重要组件,常用于展示表格数据。本文将详细介绍...

    Ext JS Library 2.2

    Ext JS Library 2.2 是一个历史悠久且功能强大的JavaScript库,专为构建富客户端Web应用程序而设计。这个版本发布于2008年,是Ext JS系列中的一个重要里程碑,为开发者提供了丰富的用户界面组件和先进的数据绑定机制...

    Ext自定义控件库

    自定义AddWindow可以提供更丰富的交互,如预设表单、自定义验证或动画效果,以提升用户体验。 5. **ResultPanel.xdc**:ResultPanel可能是用于展示操作结果的组件,比如查询结果或任务执行状态。它可以包含自定义的...

    深入浅出Ext JS(第2版) 随书光盘提供的书中实例

    《深入浅出Ext JS(第2版)》是一本详细解析Ext JS框架的权威书籍,其随书光盘包含了书中所有实例的源代码,这些代码对应于Ext JS的3.2.0版本。通过深入研究这些实例,读者可以更直观、更深入地理解Ext JS的强大功能和...

    EXT_JS实例,官方实例

    EXT_JS是一种基于JavaScript的开源富客户端框架,专为构建交互式、数据驱动的Web应用程序而设计。EXT JS的核心是EXT Core,它提供了一套高级的DOM操作和事件处理功能。EXT JS实例通常包括一系列预定义的组件、布局、...

    JavaScript凌厉开发(Ext_JS_3详解与实践

    《JavaScript凌厉开发(Ext_JS_3详解与实践)》这本书深入浅出地探讨了JavaScript编程中的高级技术,特别是对Ext JS 3框架的应用。Ext JS是一个强大的客户端JavaScript库,它提供了一整套用于构建富互联网应用(RIA)...

    Ext表单组件实现用户注册

    在Web开发中,用户注册是常见的功能之一,而Ext JS是一个强大的JavaScript库,用于构建复杂的、数据驱动的富客户端应用程序。本篇文章将聚焦于如何使用Ext表单组件来实现用户注册的功能。 首先,我们来看看`form....

    Ext 中实现Excel导出

    根据给定的信息,本文将详细解释如何在Ext框架中实现Excel导出功能。这涉及到从前台界面设计到后端数据处理的多个环节。下面将依次介绍相关知识点。 ### 一、Ext简介 Ext是一个用于构建交互式Web应用程序的...

    Ext JS 4 Architecture

    文档中提及的“ComponentExample”可能是指一个示例组件,展示了如何在Ext JS 4应用程序中实现和使用组件。对于学习者来说,通过分析和运行示例代码,可以更好地理解各组件的工作原理和实际应用。 12. **Store和...

    EXT表单验证之TextField

    除了基本的vtype验证,EXT还允许通过扩展自定义验证函数来实现更复杂的逻辑。例如,你可以定义一个函数并将其作为`vtype`属性,该函数接收输入值并返回true(有效)或false(无效)。此外,每个vtype都可以配置一个...

    Ext-js 2.2

    Ext-js 2.2 是一个历史悠久的前端JavaScript框架,由Sencha公司开发,主要用于构建富互联网应用程序(RIA)。这个版本发布于2009年,是Ext-js发展过程中的一个重要里程碑,它为开发者提供了丰富的组件库、强大的数据...

    ext-3.2.0 下载

    EXT 3.2.0是EXT JS框架的一个版本,它是一个强大的JavaScript库,主要用于构建富互联网应用程序(RIA)。EXT JS提供了丰富的用户界面组件和强大的数据管理功能,使得开发者能够创建功能丰富的、交互性强的Web应用,...

Global site tag (gtag.js) - Google Analytics