Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = "resources/images/default/s.gif";
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
//自定义VTypes类型,验证日期范围
Ext.apply(Ext.form.VTypes, {
dateRange: function(val, field){
if(field.dateRange){
var beginId = field.dateRange.begin;
this.beginField = Ext.getCmp(beginId);
var endId = field.dateRange.end;
this.endField = Ext.getCmp(endId);
var beginDate = this.beginField.getValue();
var endDate = this.endField.getValue();
}
if(beginDate <= endDate){
return true;
}else{
return false;
}
},
//验证失败信息
dateRangeText: '开始日期不能大于结束日期'
});
var dateForm = new Ext.FormPanel({
title: '自定义验证',
labelSeparator: ':',
labelWidth: 80,
bodyStyle: 'padding: 5 5 5 5',
frame: true,
height: 130,
width: 300,
renderTo: Ext.getBody(),
items: [{
xtype: 'datefield',
id: 'beginDate',
format: 'Y年m月d日',
width: 150,
allowBlank: false,
readOnly: true,
value: new Date(),
fieldLabel: '开始日期',
//用于Vtype类型dateRange
dateRange: {begin: 'beginDate', end: 'endDate' },
vtype: 'dateRange'
},{
xtype: 'datefield',
id: 'endDate',
format: 'Y年m月d日',
width: 150,
allowBlank: false,
readOnly: true,
value: new Date(),
fieldLabel: '结束日期',
//用于Vtype类型dateRange
dateRange: {begin: 'beginDate', end: 'endDate' },
vtype: 'dateRange'
}],
buttons: [{
text:'提交',
handler: function(){
//先检查表单的基本验证是否完成
if (dateForm.form.isValid()){
Ext.Msg.alert('提示','验证通过提交表单');
}
}
}]
})
})
分享到:
相关推荐
每个表单字段都可以配置验证规则,通过`vtype`属性定义基本的验证类型,或者使用`validators`属性自定义验证函数。对于特殊字符的验证,我们通常会关心如何限制或排除某些特定字符。 1. **基本验证类型(vtype)**...
通过阅读如"EXT 表单验证_journeylin_新浪博客.html"、"ExtJS中表单验证使用自定义vtype示例 - 芒果奶茶的日志 - 网易博客.mht"和"Ext表单验证 - 天行健的日志 - 网易博客.mht"这样的资源,你可以深入理解EXT表单...
- 若要创建自定义 `vtype`,需要提供正则表达式、输入掩码和错误消息。 - 示例:创建一个验证导演姓名的 `vtype`,要求由两个以大写字母开头的单词组成,单词间用空格分隔。 - 定义 `nameVal`, `nameMask` 和 `name...
4. **主题定制**:ExtJS 具有强大的主题定制能力,允许开发者自定义界面样式,满足个性化需求。 #### 示例详解 下面我们将通过一系列具体示例来逐步学习 ExtJS 的使用方法: ### 示例 1:创建一个简单的窗口 ```...
在提供的"demo"压缩包中,你可能会找到三个不同的文件夹,分别对应Jquery、YUI和ExtJs的表单验证示例。这些示例通常会包含HTML文件展示表单结构,CSS文件用于样式控制,以及JavaScript文件实现验证逻辑。你可以通过...
总结来说,这个示例展示了如何利用JavaScript和ExtJS的正则表达式及VType进行表单验证,以确保用户输入的数字、字母、汉字和电子邮件格式正确无误。这对于创建健壮的前端表单和提升用户体验至关重要。在实际开发中,...
在“EXT form小例子”中,我们将探讨EXTJS Form组件的基础用法,包括客户端验证和对`Ext.form.Vtype`的扩展。 1. EXTJS Form组件基础: - 表单创建:EXTJS中的表单通常通过`Ext.create`方法创建,如`Ext.create('...
ExtJS 是一个强大的JavaScript库,专门用于构建富客户端的Web应用程序。在提供的压缩包中,"ext-3-TextField-sample.rar" 涉及...通过研究提供的示例和文档,你可以更深入地了解如何在ExtJS中有效地利用TextField组件。