关于Ext的验证其实很简单,不知道大家是否看过Ext的例子,它提供的adv-vtypes这个例子是一个很好的Ext验证入门工具。通过这个例子我们可以知道Ext验证所用的机制是调用我们自己定义的函数进行验证的,而它自带的验证方法太少。于是我结合validation.js做了一个Ext的validation希望对大家有所帮助。
Ext.apply(Ext.form.VTypes,
{
password: function(val, field)
{
if (field.initialPassField)
{
var pwd = Ext.getCmp(field.initialPassField);
return (val == pwd.getValue());
}
return true;
},
passwordText: '两次输入的密码不一致!',
chinese:function(val,field)
{
var reg = /^[\u4e00-\u9fa5]+$/i;
if(!reg.test(val))
{
return false;
}
return true;
},
chineseText:'请输入中文',
age:function(val,field)
{
try
{
if(parseInt(val) >= 18 && parseInt(val) <= 100)
return true;
return false;
}
catch(err)
{
return false;
}
},
ageText:'年龄输入有误',
alphanum:function(val,field)
{
try
{
if(!/\W/.test(val))
return true;
return false;
}
catch(e)
{
return false;
}
},
alphanumText:'请输入英文字母或是数字,其它字符是不允许的.',
url:function(val,field)
{
try
{
if(/^(http|https|ftp):\/\/(([A-Z0-9][A-Z0-9_-]*)(\.[A-Z0-9][A-Z0-9_-]*)+)(:(\d+))?\/?/i.test(val))
return true;
return false;
}
catch(e)
{
return false;
}
},
urlText:'请输入有效的URL地址.',
max:function(val,field)
{
try
{
if(parseFloat(val) <= parseFloat(field.max))
return true;
return false;
}
catch(e)
{
return false;
}
},
maxText:'超过最大值',
min:function(val,field)
{
try
{
if(parseFloat(val) >= parseFloat(field.min))
return true;
return false;
}
catch(e)
{
return false;
}
},
minText:'小于最小值',
datecn:function(val,field)
{
try
{
var regex = /^(\d{4})-(\d{2})-(\d{2})$/;
if(!regex.test(val)) return false;
var d = new Date(val.replace(regex, '$1/$2/$3'));
return (parseInt(RegExp.$2, 10) == (1+d.getMonth())) && (parseInt(RegExp.$3, 10) == d.getDate())&&(parseInt(RegExp.$1, 10) == d.getFullYear());
}
catch(e)
{
return false;
}
},
datecnText:'请使用这样的日期格式: yyyy-mm-dd. 例如:2008-06-20.',
integer:function(val,field)
{
try
{
if(/^[-+]?[\d]+$/.test(val))
return true;
return false;
}
catch(e)
{
return false;
}
},
integerText:'请输入正确的整数',
minlength:function(val,field)
{
try
{
if(val.length >= parseInt(field.minlen))
return true;
return false
}
catch(e)
{
return false;
}
},
minlengthText:'长度过小',
maxlength:function(val,field)
{
try
{
if(val.length <= parseInt(field.maxlen))
return true;
return false;
}
catch(e)
{
return false;
}
},
maxlengthText:'长度过大',
ip:function(val,field)
{
try
{
if((/^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(val)))
return true;
return false;
}
catch(e)
{
return false;
}
},
ipText:'请输入正确的IP地址',
phone:function(val,field)
{
try
{
if(/^((0[1-9]{3})?(0[12][0-9])?[-])?\d{6,8}$/.test(val))
return true;
return false;
}
catch(e)
{
return false;
}
},
phoneText:'请输入正确的电话号码,如:0920-29392929',
mobilephone:function(val,field)
{
try
{
if(/(^0?[1][35][0-9]{9}$)/.test(val))
return true;
return false;
}
catch(e)
{
return false;
}
},
mobilephoneText:'请输入正确的手机号码',
alpha:function(val,field)
{
try
{
if( /^[a-zA-Z]+$/.test(val))
return true;
return false;
}
catch(e)
{
return false;
}
},
alphaText:'请输入英文字母'
});
注:如果想在页面上显示中文,请使用UTF-8编码。
这段代码我初步试了一下,并没有都试,大家可以试试,看看好用不。如果有什么错误,也请大家提出自己的想法,或者贴一下改进代码。
分享到:
相关推荐
各位csdn的朋友大家好!我的小作品诞生了!这是我历时几千几万秒做出来的一个小插件.仰望大家对小弟的不支持+支持.希望这个小东东可以给大家带来方便. 还希望大家小试一下! 看看我还有什么地方可以完善的.
EXT表单验证是EXT JS框架中的一个重要特性,用于在用户输入数据时确保数据的正确性和完整性。EXT JS是一个强大的JavaScript库,专为构建富客户端Web应用程序而设计。它提供了丰富的组件库,包括表格、表单、菜单等,...
EXT是Sencha公司开发的一款基于JavaScript的富客户端应用框架,它提供了一套完整的组件化UI构建工具,其中EXT表单(FormPanel)是用于创建复杂数据输入和验证的重要部分。在EXT表单中,TextField是最常见的输入控件...
这篇博客"Ext做密码验证"可能详细介绍了如何在ExtJS框架下实现这一功能。ExtJS是一个流行的JavaScript库,用于构建富客户端的Web应用。它提供了一个强大的组件模型和数据绑定机制,使得创建复杂的UI变得简单。 首先...
通过EXT的表单组件,可以构建复杂的表单输入和验证机制;通过EXT的图表组件,可以直观地展示数据分析结果。EXT的组件化开发模式使得代码结构清晰,维护性更强。 总的来说,EXT框架,特别是EXT3.jar,为开发者提供了...
EXT提供了强大的表单验证功能,其中`exPro`属性允许定义复杂的验证规则。例如,`gatewayServerIp`输入框的验证规则包括不允许空白和必须符合IPv4地址格式。此外,通过`regexText`属性可以自定义错误消息,使其更加...
本篇文章将详细讲解如何利用Ext JS的Vtype(验证类型)来实现登录表单的验证功能。Ext JS是一个强大的JavaScript框架,提供了丰富的组件和功能,包括复杂的表单验证机制。 首先,理解Vtype的概念。Vtype是Ext JS中...
最后,dumpe2fs和debugfs可用于检查和验证文件系统设置,确保所有数据都正确无误地写入。 四、安全与最佳实践 使用ext4_utils时,遵循最佳实践至关重要。这包括定期检查和修复文件系统(特别是在刷机前),谨慎...
9. **强大的表单组件**:EXT提供了各种表单元素,支持验证、动态加载和远程提交,便于构建功能完备的在线表单。 10. **性能优化**:EXT通过延迟加载、按需渲染和组件缓存等策略,提升了大型应用的性能和加载速度。 ...
本文将围绕“EXT入门:登陆验证表单提交”这一主题,深入探讨EXTJS中实现登录表单验证的基本步骤和原理。 EXTJS允许我们通过其丰富的组件库创建美观且功能丰富的表单,包括输入框、按钮等元素。在登录场景中,我们...
它们提供了创建和管理HTML表单的能力,支持各种输入类型、验证规则以及数据提交。Ext Form还包含了自定义表单字段、联动控制等高级特性。 对于数据管理,Ext 2.1提供了Store对象,它可以存储和管理数据,与服务器...
6. **响应处理**:服务器端验证成功后,会返回一个响应,EXT3.0会处理这个响应,可能包括显示登录成功消息、重定向到其他页面或者在验证失败时显示错误信息。 7. **源码分析**:EXT3.0的源码提供了学习EXT组件用法...
"纯手工打造类似Ext的验证效果"这个主题聚焦于使用JavaScript进行表单验证,模仿流行的ExtJS库提供的验证功能。ExtJS是一款功能强大的JavaScript框架,它提供了丰富的组件和强大的数据绑定机制,包括复杂的表单验证...
JavaScript主要用于客户端浏览器,执行动态网页效果、用户交互、数据验证等功能。它是一种解释型、基于原型的对象导向语言,具有弱类型和动态类型特性。JavaScript在Web开发中的地位举足轻重,是实现网页动态性和...
3. **验证**:EXT支持表单验证,DateTimeField可以设置`allowBlank`来控制是否允许为空,`invalidText`则可以自定义验证失败时的提示信息。 4. **国际化**:EXT框架支持多语言,日期和时间的显示可以根据不同的语言...
7. **FormPanel**:用于创建表单,支持各种表单元素,并能进行验证和数据提交。 8. **Drag and Drop**:EXT支持拖放操作,允许用户通过鼠标拖动组件或数据。 9. **Ext Designer支持**:EXT 2.0可能还支持EXT ...
5. **表单(Forms)**:EXT提供了丰富的表单组件和表单处理功能,如文本框、下拉框、复选框等,以及表单验证和提交机制。 6. **工具栏(Toolbars)**:EXT的工具栏组件可以轻松添加各种按钮、菜单和分割线,为用户...
此外,`Ext.form.FormPanel`和相关组件允许创建复杂的表单,支持验证和数据提交。拖放功能允许用户通过简单的拖动操作来交互,增强了用户体验。还有许多其他工具类,如`Ext.util.Format`,提供了一系列实用的格式化...
1. 表单元素:如文本框、复选框、单选按钮、下拉列表等,支持各种验证和动态加载。 2. 数据网格:用于展示大量数据,支持分页、排序、过滤和编辑。 3. 工具栏和菜单:提供常用操作的快捷入口,可以自定义图标和事件...