近日來對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例如:username@domain.com",
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例如:username@domain.com", //這里是驗證失敗信息
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 });