【转】EXT VTYPE自定义举例

原文地址:http://www.blogjava.net/xiaohuzi2008/archive/2012/12/08/392676.html

近日来对Ext特别感兴趣,也许是它那种OO的设计思想吸引了我,也可以追溯到第一次见到EXT那种漂亮的界面开始吧.求神拜佛不如自食其力,为了一点小的问题找遍了GOOGLE也没个结果,自己甚少去BBS混,也不熟悉规矩,只能硬着头皮自己干了.翻源代码是一道必不可少的工序,说来惭愧,自己对JS的认识还停留在入门阶段.
这里说说自己对于Ext验证这里浅薄的理解:
首先看看如下一段代码

Ext.applyIf(Ext.form.VTypes, {
        "mail" : function(_v) {
         return /^\[email protected]\w+\.\w+$/.test(_v);
       },
        "mailText" : "请输入正确的email格式!\n例如:[email protected]",
        "mailMask" : /[\[email protected]]/i
  });

这里是对Ext.form.VTypes进行扩展,增加了我们需要的email验证.

既然是扩展,那么我们就得先来看看这个父类到底是个什么样子.

1 Ext.form.VTypes = function(){
 2     // closure these in so they are only created once.
 3     var alpha = /^[a-zA-Z_]+$/;
 4     var alphanum = /^[a-zA-Z0-9_]+$/;
 5     var email = /^([\w]+)(.[\w]+)*@([\w-]+\.){1,5}([A-Za-z]){2,4}$/;
 6     var url = /(((https?)|(ftp)):\/\/([\-\w]+\.)+\w{2,3}(\/[%\-\w]+(\.\w{2,})?)*(([\w\-\.\?\\\/[email protected]&#;`~=%!]*)(\.\w{2,})?)*\/?)/i;
 7
 8     return {
 9         ‘email‘ : function(v){
10             return email.test(v);
11         },
12         ‘emailMask‘ : /[a-z0-9_\.\[email protected]]/i,
13         ‘url‘ : function(v){
14             return url.test(v);
15         },
16         ‘urlText‘ : ‘This field should be a URL in the format "http:/‘+‘/www.domain.com"‘,
17         ‘alpha‘ : function(v){
18             return alpha.test(v);
19         },
20         ‘alphaText‘ : ‘This field should only contain letters and _‘,
21         ‘alphaMask‘ : /[a-z_]/i,
22         ‘alphanum‘ : function(v){
23             return alphanum.test(v);
24         },
25         ‘alphanumText‘ : ‘This field should only contain letters, numbers and _‘,
26         ‘alphanumMask‘ : /[a-z0-9_]/i
27     };
28 }();

以上就是Ext.form.VTypes的庐山真面目了,这里返回一个JSON的对象其中包括方法和属性,可以理解为这个类的公有方法和属性比较OO.

通过分析我们可以看到这里有个规律,xxx,xxxText,xxxMask,这些东西到底都是干嘛的?

在我们的TextField类里边有这么一个字符类型的属性vtype,在TextField类的初始化代码中,有这么一段

if(this.maskRe || (this.vtype && this.disableKeyFilter !== true && (this.maskRe = Ext.form.VTypes[this.vtype+‘Mask‘]))){
2             this.el.on("keypress", this.filterKeys, this);
3         }

这里我把重要的用黑体字标了出来,我们可以看到,当我们设置了当前对象(TextField)vtype属性时候,当前对象的maskRe属性获取了VTypes类的this.vtype+‘Mask‘属性,看到这里我们就明白了xxxMask属性里边的正则表达式是自动赋值给TextField的,这个属性在TextField控件keypress事件触发时候调用的,作用是用来限制输入的字符.

再看下面一段代码

if(this.vtype){
2             var vt = Ext.form.VTypes;
3             if(!vt[this.vtype](value, this)){
4                 this.markInvalid(this.vtypeText || vt[this.vtype +‘Text‘]);
5                 return false;
6             }
7         }

这里是fieldText控件的validateValue方法里边会执行到的代码,这段代码的作用就是验证当前控件输入的内容是否通过我们刚才定义的XXX里边的验证逻辑,如果未通过则使用this.arkinvalid方法去执行未通过操作并且返回一个false.

具体谁调用这个validateValue方法,我们可以去查看该控件的父类,或与submit相关的类,这里只是返回一个与当前设置的vtype相关的验证属性

看到这里我们也就明白了,刚才上边定义的xxx,xxxText,xxxMask的作用分别为,验证逻辑,验证失败信息,控件输入验证.

知道了这些我们要来扩展这个VTypes就易如反掌了

1 Ext.applyIf(Ext.form.VTypes, {
2        "mail" : function(_v) { //定义验证逻辑,返回布尔类型的验证结果
3         return /^\[email protected]\w+\.\w+$/.test(_v);
4        },
5        "mailText" : "请输入正确的email格式!\n例如:[email protected]", //这里是验证失败信息
6        "mailMask" : /[\[email protected]]/i   //这里是输入字符验证
7       });

好了,我们的验证到这里就结束了.如果需要更深入的验证,那么我们就必须自己去实现一些复杂的逻辑了.

这里再给大家贴出一些简单的验证逻辑

1 Ext.apply(Ext.form.VTypes, {
  2 // 年龄
  3 "age" : function(_v) {
  4    if (/^\d+$/.test(_v)) {
  5     var _age = parseInt(_v);
  6     if (_age < 200)
  7      return true;
  8    } else
  9     return false;
 10 },
 11 ‘ageText‘ : ‘年龄格式出错!!格式例如:20‘,
 12 ‘ageMask‘ : /[0-9]/i,
 13 // 密码验证
 14 "repassword" : function(_v, field) {
 15    if (field.confirmTO) {
 16     var psw = Ext.get(field.confirmTO);
 17     return (_v == psw.getValue());
 18    }
 19    return true;
 20 },
 21 "repasswordText" : "密码输入不一致!!",
 22 "repasswordMask" : /[a-z0-9]/i,
 23 // 邮政编码
 24 "postcode" : function(_v) {
 25    return /^[1-9]\d{5}$/.test(_v);
 26 },
 27 "postcodeText" : "该输入项目必须是邮政编码格式,例如:226001",
 28 "postcodeMask" : /[0-9]/i,
 29
 30 // IP地址验证
 31 "ip" : function(_v) {
 32    return /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
 33      .test(_v);
 34
 35 },
 36 "ipText" : "该输入项目必须是IP地址格式,例如:222.192.42.12",
 37 "ipMask" : /[0-9\.]/i,
 38 // 固定电话及小灵通
 39 "telephone" : function(_v) {
 40    return /(^\d{3}\-\d{7,8}$)|(^\d{4}\-\d{7,8}$)|(^\d{3}\d{7,8}$)|(^\d{4}\d{7,8}$)|(^\d{7,8}$)/
 41      .test(_v);
 42 },
 43 "telephoneText" : "该输入项目必须是电话号码格式,例如:0513-89500414,051389500414,89500414",
 44 "telephoneMask" : /[0-9\-]/i,
 45 // 手机
 46 "mobile" : function(_v) {
 47    return /^1[35][0-9]\d{8}$/.test(_v);
 48 },
 49 "mobileText" : "该输入项目必须是手机号码格式,例如:13485135075",
 50 "mobileMask" : /[0-9]/i,
 51 // 身份证
 52 "IDCard" : function(_v) {
 53    // return /(^[0-9]{17}([0-9]|[Xx])$)|(^[0-9]{17}$)/.test(_v);
 54    var area = {
 55     11 : "北京",
 56     12 : "天津",
 57     13 : "河北",
 58     14 : "山西",
 59     15 : "内蒙古",
 60     21 : "辽宁",
 61     22 : "吉林",
 62     23 : "黑龙江",
 63     31 : "上海",
 64     32 : "江苏",
 65     33 : "浙江",
 66     34 : "安徽",
 67     35 : "福建",
 68     36 : "江西",
 69     37 : "山东",
 70     41 : "河南",
 71     42 : "湖北",
 72     43 : "湖南",
 73     44 : "广东",
 74     45 : "广西",
 75     46 : "海南",
 76     50 : "重庆",
 77     51 : "四川",
 78     52 : "贵州",
 79     53 : "云南",
 80     54 : "西藏",
 81     61 : "陕西",
 82     62 : "甘肃",
 83     63 : "青海",
 84     64 : "宁夏",
 85     65 : "新疆",
 86     71 : "台湾",
 87     81 : "香港",
 88     82 : "澳门",
 89     91 : "国外"
 90    }
 91    var Y, JYM;
 92    var S, M;
 93    var idcard_array = new Array();
 94    idcard_array = _v.split("");
 95    // 地区检验
 96    if (area[parseInt(_v.substr(0, 2))] == null) {
 97     this.IDCardText = "身份证号码地区非法!!,格式例如:32";
 98     return false;
 99    }
100    // 身份号码位数及格式检验
101    switch (_v.length) {
102     case 15 :
103      if ((parseInt(_v.substr(6, 2)) + 1900) % 4 == 0
104        || ((parseInt(_v.substr(6, 2)) + 1900) % 100 == 0 && (parseInt(_v
105          .substr(6, 2)) + 1900)
106          % 4 == 0)) {
107       ereg = /^[1-9][0-9]{5}[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}$/;// 测试出生日期的合法性
108      } else {
109       ereg = /^[1-9][0-9]{5}[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|1[0-9]|2[0-8]))[0-9]{3}$/;// 测试出生日期的合法性
110      }
111      if (ereg.test(_v))
112       return true;
113      else {
114       this.IDCardText = "身份证号码出生日期超出范围,格式例如:19860817";
115       return false;
116      }
117      break;
118     case 18 :
119      // 18位身份号码检测
120      // 出生日期的合法性检查
121      // 闰年月日:((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))
122      // 平年月日:((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|1[0-9]|2[0-8]))
123      if (parseInt(_v.substr(6, 4)) % 4 == 0
124        || (parseInt(_v.substr(6, 4)) % 100 == 0 && parseInt(_v
125          .substr(6, 4))
126          % 4 == 0)) {
127       ereg = /^[1-9][0-9]{5}19[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}[0-9Xx]$/;// 闰年出生日期的合法性正则表达式
128      } else {
129       ereg = /^[1-9][0-9]{5}19[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|1[0-9]|2[0-8]))[0-9]{3}[0-9Xx]$/;// 平年出生日期的合法性正则表达式
130      }
131      if (ereg.test(_v)) {// 测试出生日期的合法性
132       // 计算校验位
133       S = (parseInt(idcard_array[0]) + parseInt(idcard_array[10]))
134         * 7
135         + (parseInt(idcard_array[1]) + parseInt(idcard_array[11]))
136         * 9
137         + (parseInt(idcard_array[2]) + parseInt(idcard_array[12]))
138         * 10
139         + (parseInt(idcard_array[3]) + parseInt(idcard_array[13]))
140         * 5
141         + (parseInt(idcard_array[4]) + parseInt(idcard_array[14]))
142         * 8
143         + (parseInt(idcard_array[5]) + parseInt(idcard_array[15]))
144         * 4
145         + (parseInt(idcard_array[6]) + parseInt(idcard_array[16]))
146         * 2
147         + parseInt(idcard_array[7])
148         * 1
149         + parseInt(idcard_array[8])
150         * 6
151         + parseInt(idcard_array[9]) * 3;
152       Y = S % 11;
153       M = "F";
154       JYM = "10X98765432";
155       M = JYM.substr(Y, 1);// 判断校验位
156       // alert(idcard_array[17]);
157       if (M == idcard_array[17]) {
158        return true; // 检测ID的校验位
159       } else {
160        this.IDCardText = "身份证号码末位校验位校验出错,请注意x的大小写,格式例如:201X";
161        return false;
162       }
163      } else {
164       this.IDCardText = "身份证号码出生日期超出范围,格式例如:19860817";
165       return false;
166      }
167      break;
168     default :
169      this.IDCardText = "身份证号码位数不对,应该为15位或是18位";
170      return false;
171      break;
172    }
173 },
174 "IDCardText" : "该输入项目必须是身份证号码格式,例如:32082919860817201x",
175 "IDCardMask" : /[0-9xX]/i
176 });
时间: 2024-10-22 11:42:56

【转】EXT VTYPE自定义举例的相关文章

使用Ext.define自定义类

ExtJS 允许用户使用Ext.define 自定义类.本文将通过实例介绍如何使用Ext.define自定义类,并介绍ExtJS 的动态加载(Require方法)的使用方法. Javascript自定义类 在Javascript中,自定义类是这样的: // 在Javascript中,自定义类 var Person = function(name, age) { this.Name = ""; this.Age = 0; this.say = function(msg) { alert(

ext panel 自定义图片刷新

最近从管理回归开发,着实是花了些功夫适应,不过换个角度处理问题,貌似效果不错,废话不多说,最近项目用到了EXT js,百度大神里面没找到一个合适的图片组件,自己写了个可以刷新的图片组件,先说明:由于项目原因,只能贴出部分代码,此代码仅供参考 思路:先删除,再添加,使用doLayout()重布局 防止读取缓存中图片: 在图片链接后面加上" '?' + Math.random()",会从后台重新读取 代码如下: imagePanel = new Ext.Panel( { region :

Ext vtype

//form验证中vtype的默认支持类型1.alpha //只能输入字母,无法输入其他(如数字,特殊符号等)2.alphanum//只能输入字母和数字,无法输入其他3.email//email验证,要求的格式是"cnblogs@gmail.com"4.url//url格式验证, {fieldLabel:"不能为空", vtype:"email",//email格式验证 vtypeText:"不是有效的邮箱地址",//错误提示

EXTJS--使用Ext.define自定义类

Javascript自定义类 var person = function(name,age){ this.Name = ""; this.Age = 26: this.Say = function(msg){ alert(this.Name + " Says : " + msg); } this.init = function(name,age){ this.Name = name; this.Age = age; } this.init(name, age); }

Ext.Net学习笔记14:Ext.Net GridPanel Grouping用法

Ext.Net学习笔记14:Ext.Net GridPanel Grouping用法 Ext.Net GridPanel可以进行Group操作,例如: 如何启用Grouping功能呢?只需要在GridPanel中添加一行配置节点: <Features> <ext:GridFilters ID="GridFilters1" runat="server" Local="true"> <Filters> <ex

Ext.Net系列:一安装与使用

http://www.cnblogs.com/howDo/archive/2011/04/27/2031084.html 下载地址:http://www.ext.net/download/ 示例地址:http://examples.ext.net/ 自定义下拉框树:http://www.shaoqun.com/a/17969.aspx

WebMisSharp,WebMisCentral,企业框架正则表达式规则共享专版

ElegantWM.WebUI/Application/common/src/Tools.js 欢迎大家贡献更多的正则验证规则,目前支持如下: /*****************************************************************/ /* VType自定义校验 */ /*****************************************************************/ Ext.apply(Ext.form.VTypes

DBFound 快速应用开发平台

DBFound 宗旨:解决开发技术复杂.难度高.开发速度慢等问题.提供快速.便利.高效率的开发平台. DBFound 简介:通过配置实现前端与后端的交互,实现功能强大.快捷简便的操作方式.只需配置一系列的 Model 实体文件,外界通过访问 Model 文件就能访问数据库,从而进行数据的增删改查.通过 jstl 标签配置就能实现强大而美观的 UI 界面. DBFound 标签分为两类:Model 实体标签 和 JSP 标签 JSP 标签又分为: UI 标签 和 控制标签 更多请关注:https:

开发EXTMVC框架前需要了解的基础知识整理

1.组件选择器 目的:了解如何选择Extjs中的组件,就跟学习jquery时一定会先要学习:$()选择器一样. 常用场景:       1.在controller中的control事件中用到       2.在普通的事件处理中也要用到 参考文章:      http://www.cnblogs.com/daxin/archive/2013/06/01/3112530.html      http://www.cnblogs.com/weilao/archive/2011/11/26/226431