ExtJS5 - 使用vtype自定义表单域的验证规则
来源:互联网 发布:软件著作权转让 编辑:程序博客网 时间:2024/06/14 17:07
ExtJS内置提供的表单域验证规则比较简单,仅支持alpha(英文字母)、alphanum(英文字母和数字)、email(电子邮箱)、url(网址)四种格式,使用方式如下:
{ xtype: "textfield",fieldLabel: "Email",name: "email",vtype: "email", //使用电子邮箱格式校验vtypeText: "请输入正确的电子邮箱格式!" //重写预定义的错误提示信息}
好在ExtJS提供了比较好的扩展机制,允许通过扩展Ext.form.field.VTypes类来自定义自己需要的验证规则,这里以验证用户输入是否为有效的IP地址为例。
首先,扩展Ext.form.field.VTypes类,自定义验证规则:
//IP地址验证Ext.apply(Ext.form.field.VTypes, {ip: function(val, field) {return /^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/.test(val); },ipText: "请输入正确格式的IP地址!", ipMask: /[\d\.]/i });
ip:自定义的vtype属性值,使用合适的正则表达式对用户输入进行验证,通过则返回true,否则返回false。参数val是该表单域的值,field指该表单域元素。
ipText:用户自定义的错误提示信息。
ipMask:其值为正则表达式,过滤非法的键盘输入。比如这里用户只能输入数字和“.”操作符,输入其他字符会自动被忽略。
同一组验证规则的属性名称必须一致,符合 xx、xxText、xxMask 的形式。
在表单域中调用自定义的验证规则:
{xtype: "textfield", fieldLabel: "IP",name: "ip",vtype: "ip"}
可见,合理运用ExtJS的表单验证扩展机制,可以实现非常强大的前端验证。另外,还可以利用表单域的allowBlank、maxLength、minLength及针对numberfield的maxValue、minValue实现非空、最大(小)长度、最大(小)值等基础验证。
0 0
- ExtJS5 - 使用vtype自定义表单域的验证规则
- 表单验证(使用Vtype)
- ExtJs 自定义Vtype验证
- Coolite自定义验证,VType
- 自定义vtype验证
- ExtJs 自定义Vtype验证
- ExtJs 自定义Vtype验证
- 使用ext的Vtype密码验证错误
- Extjs利用vtype验证表单
- ExtJS中表单验证使用自定义vtype示例
- ExtJS中表单验证使用自定义vtype示例
- 使用Django的ModelForm对表单进行自动验证(可自定义验证规则)
- DWZ表单自定义验证规则
- jquery.validate.js使用之自定义表单验证规则
- jquery.validate.js使用之自定义表单验证规则
- jquery.validate.js使用之自定义表单验证规则
- ExtJS中表单验证使用自定义vtype(两次输入密码重复)示例
- ExtJS中表单验证使用自定义vtype(两次输入密码重复)示例
- 一个简单的错误,关于bootstrap模态框挡住了按钮。
- Python3基础-语言内置
- Leetcode:Missing Number & Maximum Product of Word Lengths
- 一些简单的Python测试题
- MySQL中select * for update锁表的问题
- ExtJS5 - 使用vtype自定义表单域的验证规则
- Android控件之AutoCompleteTextView
- 剑指offer第三十四题【数字在排序数组中出现的次数】c++实现
- LayoutInflater中的inflate方法详解(转载整理)
- android中SQLite数据库操作
- 支持向量机通俗导论(理解SVM的三层境界)
- AES加密解密Windows下跟linux下结果不同的解决方案
- 北京兄弟连web前端
- CocoaPod