EXT VTYPE

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

这里说说自己对于Ext验证这里浅薄的理解:

首先看看如下一段代码

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

这里是对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\ - \.\ ? \\\ /+ @ & #;` ~=%! ] * )(\.\w{ 2 ,}) ? ) * \ /? ) / i;
 7 
 8       return  {
 9          'email' :  function (v){
10               return  email.test(v);
11          },
12          'emailMask' :  / [a - z0 - 9_\.\ - @] / 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类的初始化代码中,有这么一段

1  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事件触发时候调用的,作用是用来限制输入的字符.

再看下面一段代码

1  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   /^ \w + @\w + \.\w + $ / .test(_v);
4         },
5          " mailText "  :  " 请输入正确的email格式!\n例如:[email protected] " ,  // 这里是验证失败信息
6          " mailMask "  :  / [\w@.] / 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  });

原文出自：

http://cupoy.iteye.com/blog/438946