ExtJS4-数据验证
2016-12-16 12:56
204 查看
例子:
效果图:
<script type="text/javascript"> <!--在页面加载完成后调用JS代码--> Ext.onReady(function(){ Ext.create('Ext.form.Panel', { frame: true, title: 'Form Fields Validation', width: 340, bodyPadding: 5, renderTo: 'myForm', fieldDefaults: { labelAlign: 'left', labelWidth: 90, anchor: '100%', //错误提示显示在下方,还可以配置为side、title、none msgTarget: 'under' }, items: [{ xtype: 'textfield', name: 'textfield1', fieldLabel: '必须输入', //不允许为空验证 allowBlank: false //1 },{ xtype: 'textfield', name: 'textfield2', fieldLabel: '知道两个字符', //输入的字符长度验证(至少输入2个字符) minLength: 2 //2 },{ xtype: 'textfield', name: 'textfield3', fieldLabel: '最长5个字符', //输入的字符长度验证(最多输入2个字符) maxLength: 5 //3 },{ xtype: 'textfield', name: 'textfield7', fieldLabel: '正则表达式验证电话号码', //通过正则表达式验证 regex: /^\d{3}-\d{3}-\d{4}$/, //4 regexText: 'Must be in the format xxx-xxx-xxxx' },{ xtype: 'textfield', name: 'textfield4', fieldLabel: '验证用户输入的是否为email', //已经定义好的验证,请通过文档查看vtype vtype: 'email' //5 },{ xtype: 'textfield', name: 'textfield6', fieldLabel: '验证用户输入的是否是URL', vtype: 'url' //8 }] }); }); </script>
效果图:
相关文章推荐
- ExtJs画面数据验证
- ASP.NET + EXTJS 实现类似GridView行内编辑、Pannel、分页、增删改查、数据验证,格式转换
- ExtJs 备忘录(3)—— Form表单(三) [ 数据验证 ]
- extJs_定义数据模型、验证数据模型
- Extjs数据模型验证与扩展
- Extjs客户端数据,Grid展示,弹出窗体修改,并将修改数据再次显示在Grid【未完全验证】
- Asp.net+Extjs实现对GridPanel分页、行内编辑、增加、删除、弹出新窗体增加、数据验证、编辑指定列、数据格式转换等功能
- ExtJs 备忘录(3)—— Form表单(三) [ 数据验证 ]
- ExtJs 备忘录(3)—— Form表单(三) [ 数据验证 ]
- ExtJs 备忘录(3)—— Form表单(三) [ 数据验证 ]
- EXTJS4自学手册——EXT数据结构组件(Model数据验证,数据交互)
- 数据验证之类型与格式
- InfoPath数据验证的三种方法
- 【发布】本人编写的数据验证类(C#)
- ASP.NET定制数据验证控件之略谈
- 数据验证之完整示例
- UT1是跑遍所有的异常,UT2是说有的check,数据验证都是否正常
- 使用ASP.NET定制数据验证控件
- 使用正则表达式进行xml数据验证
- 源码——WinForm窗体一次性数据合法性验证