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
分享到:
相关推荐
在提供的文件`pwdVerification.html`中,可能包含了使用ExtJS构建的密码验证UI,而`pwdValidate.js`很可能是实现验证逻辑的脚本。这个脚本可能会定义`validatePassword`函数,其中包含上述的复杂性和长度验证规则。...
Ajax在Ext JS中是指通过异步JavaScript和XML技术实现与服务器的通信,从而使页面无需刷新即可更新数据或内容。Ext JS通过其Ajax组件和方法,支持各种请求和响应处理机制,大大提高了Web应用的交互性和用户体验。 ...
3. **自定义vtype**:EXT JS允许开发人员创建自定义验证类型。这通常通过扩展`Ext.form.field.VTypes`类来完成,然后在vtype属性中使用新创建的函数名。例如,如果你需要验证一个密码强度,可以创建一个新的vtype并...
Ext JS 是一个强大的JavaScript库,专门用于构建富客户端Web应用程序。这个库以其丰富的用户界面组件、数据绑定功能和可扩展性而闻名。Ext JS 提供了一整套预先封装的组件,如表格、面板、菜单、按钮、表单、树形...
Ext JS是一个流行的JavaScript库,主要用于构建富客户端Web应用程序,它的组件库包含了一个名为“paging toolbar”的工具,用于在数据网格中实现分页操作。这个小bug可能涉及到分页功能的逻辑错误、用户界面显示异常...
本篇文章将详细讲解如何利用Ext JS的Vtype(验证类型)来实现登录表单的验证功能。Ext JS是一个强大的JavaScript框架,提供了丰富的组件和功能,包括复杂的表单验证机制。 首先,理解Vtype的概念。Vtype是Ext JS中...
通过这个修改后的`Ext.MessageBox.prompt`,开发者可以更安全地在ExtJS应用程序中实现密码输入功能,而无需自己编写复杂的加密和验证逻辑。这种封装和复用代码的方式是软件开发中的最佳实践,可以提高代码的可维护性...
Ext3.0是一种广泛使用的JavaScript库,主要用于构建富互联网应用程序(RIA)。在“Ext3.0实现多文件上传.rar”这个压缩包中,我们...通过学习和理解这个示例,开发者可以更好地掌握如何在自己的项目中实现类似的功能。
### Ext GridPanel 中实现加链接操作 在前端开发领域中,Ext JS 是一款非常流行的 JavaScript 框架,用于构建企业级的 Web 应用程序。Ext GridPanel 是该框架中的一个重要组件,常用于展示表格数据。本文将详细介绍...
Ext JS Library 2.2 是一个历史悠久且功能强大的JavaScript库,专为构建富客户端Web应用程序而设计。这个版本发布于2008年,是Ext JS系列中的一个重要里程碑,为开发者提供了丰富的用户界面组件和先进的数据绑定机制...
自定义AddWindow可以提供更丰富的交互,如预设表单、自定义验证或动画效果,以提升用户体验。 5. **ResultPanel.xdc**:ResultPanel可能是用于展示操作结果的组件,比如查询结果或任务执行状态。它可以包含自定义的...
《深入浅出Ext JS(第2版)》是一本详细解析Ext JS框架的权威书籍,其随书光盘包含了书中所有实例的源代码,这些代码对应于Ext JS的3.2.0版本。通过深入研究这些实例,读者可以更直观、更深入地理解Ext JS的强大功能和...
EXT_JS是一种基于JavaScript的开源富客户端框架,专为构建交互式、数据驱动的Web应用程序而设计。EXT JS的核心是EXT Core,它提供了一套高级的DOM操作和事件处理功能。EXT JS实例通常包括一系列预定义的组件、布局、...
《JavaScript凌厉开发(Ext_JS_3详解与实践)》这本书深入浅出地探讨了JavaScript编程中的高级技术,特别是对Ext JS 3框架的应用。Ext JS是一个强大的客户端JavaScript库,它提供了一整套用于构建富互联网应用(RIA)...
在Web开发中,用户注册是常见的功能之一,而Ext JS是一个强大的JavaScript库,用于构建复杂的、数据驱动的富客户端应用程序。本篇文章将聚焦于如何使用Ext表单组件来实现用户注册的功能。 首先,我们来看看`form....
根据给定的信息,本文将详细解释如何在Ext框架中实现Excel导出功能。这涉及到从前台界面设计到后端数据处理的多个环节。下面将依次介绍相关知识点。 ### 一、Ext简介 Ext是一个用于构建交互式Web应用程序的...
文档中提及的“ComponentExample”可能是指一个示例组件,展示了如何在Ext JS 4应用程序中实现和使用组件。对于学习者来说,通过分析和运行示例代码,可以更好地理解各组件的工作原理和实际应用。 12. **Store和...
除了基本的vtype验证,EXT还允许通过扩展自定义验证函数来实现更复杂的逻辑。例如,你可以定义一个函数并将其作为`vtype`属性,该函数接收输入值并返回true(有效)或false(无效)。此外,每个vtype都可以配置一个...
Ext-js 2.2 是一个历史悠久的前端JavaScript框架,由Sencha公司开发,主要用于构建富互联网应用程序(RIA)。这个版本发布于2009年,是Ext-js发展过程中的一个重要里程碑,它为开发者提供了丰富的组件库、强大的数据...
EXT 3.2.0是EXT JS框架的一个版本,它是一个强大的JavaScript库,主要用于构建富互联网应用程序(RIA)。EXT JS提供了丰富的用户界面组件和强大的数据管理功能,使得开发者能够创建功能丰富的、交互性强的Web应用,...