ExtJS入门教程03，form中怎能没有validation

2024-05-11 01:37:35

接上篇内容，我们在学会extjs form的基本用法之后，今天我们来看看extjs form的validation功能。

必填项，就是不能为空（allowBlank）

效果：

代码：

{xtype: "textfield",name: "UserName",fieldLabel: "用户名",allowBlank: false,flex: 1
}

输入长度限制，maxLength/minLength

效果：

&

代码：

{xtype: "textfield",name: "UserName",fieldLabel: "用户名",allowBlank: false,maxLength: 10,minLength: 3,flex: 1
}

值大小限制，maxValue/minValue

值大小的限制常用于numberfield、datefield，可以指定一个可用值的范围。

效果：

&

代码：

{xtype: "numberfield",name: "Age",fieldLabel: "年龄",maxValue: 60,minValue: 18,flex: 1
}

vtype验证

vtype提供了一些公用的验证类型，它们包括：

alpha：希腊数字
alphanum：字母和数字
email：电子邮件地址
url：网址

这四种是extjs内置的，已经提供给我们可以直接来用的。我们拿email来进行示例。

效果：

代码：

{xtype: "textfield",name: "Email",fieldLabel: "Email",vtype: "email",flex: 1
}

vtype也可以自定义

上面介绍了vtype的简单用法，可以看到这种验证是非常好用的，但是小伙伴们不觉得extjs提供的vtype太少吗？

小伙伴们不要嫌弃，接下来我们看一下如何自定义vtype，代码：

//验证ip地址
Ext.apply(Ext.form.field.VTypes, {IPAddress: function (v) {return /^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/.test(v);},IPAddressText: '只能输入ip地址',IPAddressMask: /[\d\.]/i
});

用法：

{xtype: "textfield",name: "ip",fieldLabel: "IP地址",vtype: "IPAddress"
}

效果：

这篇文章还发布在了我的个人网站上面，链接地址：http://www.qeefee.com/article/extjs-starter-03-form-validation

如果认为此文对您有帮助，别忘了支持一下哦！

作者：齐飞

来源：http://youring2.cnblogs.com/

声明：本博客原创文字只代表本人工作中在某一时间内总结的观点或结论，与本人所在单位没有直接利益关系。非商业，未授权，贴子请以现状保留，转载时必须保留此段声明，且在文章页面明显位置给出原文连接。

转载：http://www.cnblogs.com/youring2/p/extjs-starter-03-form-validation.html

ExtJS入门教程03，form中怎能没有validation相关推荐

extjs form java_[Java教程]ExtJS入门教程02，form也可以很优雅
[Java教程]ExtJS入门教程02,form也可以很优雅 0 2014-03-28 12:00:40 在上一篇<Extjs window 入门>中,我们已经看到了如何将一个form组件 ...
EXTJS入门教程及其框架搭建
EXTJS是一个兼容AJAX的前台WEB UI的框架,在普通的HTML文件的 BODY 元素中无须写任何HTML代码,就能产生相应的表格等元素. 原创不易,转载请注明出处:EXTJS入门教程及其框架搭 ...
无废话ExtJs 入门教程六[按钮：Button]
无废话ExtJs 入门教程六[按钮:Button] extjs技术交流,欢迎加群(201926085) 继上一节内容,我们在表单里加了个两个按钮"提交"与重置.如下所示代码区的第6 ...
无废话ExtJs 入门教程十七[列表：GridPanel]
无废话ExtJs 入门教程十七[列表:GridPanel] extjs技术交流,欢迎加群(521711109) 在Extjs中,GridPanel用于数据显示,即我们平时说的列表页.在本节中,我们先对 ...
ASP.NET MVC5 + EF6 入门教程 (6) View中的Razor使用
ASP.NET MVC5 + EF6 入门教程 (6) View中的Razor使用原文:ASP.NET MVC5 + EF6 入门教程 (6) View中的Razor使用文章来源: Slark.N ...
ExtJs 入门教程（我感觉挺好的）
ExtJs 入门教程一[学习方法] ExtJs 入门教程二[Hello World] ExtJs 入门教程三[窗体:Window组件] ExtJs 入门教程四[表单:FormPanel] ExtJs ...
【前端实例代码】使用 HTML CSS实现指纹扫描仪特效动画效果 |前端开发网页制作基础入门教程网页开发中常见的样式与特效，收藏起来肯定用的上~
b站视频演示效果: [web前端特效源码]使用 HTML CSS 和 JavaScript 实现指纹扫描仪特效动画效果 |前端开发网页制作基础入门教程效果图: 完整代码: <!DOCTYP ...
C#，入门教程(03)——Visual Studio 2022编写彩色Hello World与动画效果
C#,入门教程(01)-- Visual Studio 2022 免费安装的详细图文与动画教程https://blog.csdn.net/beijinghorn/article/details/123 ...
Mono入门教程(一)--------------C++中整合Mono
前言本教程是针对需要将C#作为自己所开发的C++项目提供脚本的入门教程.由于mono教程相对较少,或缺乏完整性,故作此教程.虽然是教程,但是作者仍然是一个水平有限的程序员,因此文中如有纰漏请指正,我 ...

最新文章

热门文章