這幾天忙這忙那的,幾天工作之余繼續我的extjs4的自學生涯,今天花了一點時間整理了一下文本域中常見的表單驗證,希望對大家有所幫助...嘿嘿,不足之處,希望大家多多提點意見,共同進步.
1 //創建一個基本的表單 2 Ext.onReady(function(){ 3 4 //自己定義一個vtype,這樣可以用在全局了,不必再每一處都重新寫同樣的驗證了 5 var timeTest=/^([1-9]|1[0-9]):([0-5][0-9])(\s[a\p]m)$/i; 6 Ext.apply(Ext.form.field.VTypes,{ 7 time:function(val,field){ 8 return timeTest.test(val); 9 }, 10 //輸出錯誤的提示信息 11 timeText:'輸入的時間格式不對,必須是"12:90pm"', 12 //輸入掩碼，用於輸入過濾，即限制輸入字符集 13 timeMask:/[\d\s:am]/i 14 15 }); 16 17 Ext.create('Ext.form.Panel',{ 18 title:'基本表單驗證', 19 width:300, 20 bodyPadding:10, 21 style : 'padding-top: 10px', 22 bodyStyle : 'background-color:#FFFFFF', 23 defaultType:'textfield',//默認的表單選項 24 fieldDefaults : { 25 labelAlign : 'right', 26 msgTarget : 'side', 27 labelWidth : 120 28 }, 29 items:[ 30 { 31 fieldLabel:'非空驗證', 32 name:'name', 33 allowBlank: false, 34 blankText:'不能為空' 35 },//allowBlank是否為空的驗證,blankText提示文本 36 { 37 xtype:'textfield', 38 name:'email', 39 fieldLabel:'郵件驗證', 40 allowBlank:false, 41 blankText:'郵件不能為空', 42 vtype:'email', 43 vtypeText:'您輸入的郵箱地址不合法' 44 },//vtype為extjs自動驗證的一些屬性 45 { 46 xtype:'textfield', 47 name:'length', 48 fieldLabel:'驗證指定長度', 49 allowBlank:false, 50 blankText:'不能為空', 51 minLength:5, 52 maxLength:10, 53 }, 54 { 55 name:'english', 56 fieldLabel:'全部英文', 57 allowBlank:false, 58 blankText:'不能為空', 59 vtype:'alpha', 60 vtypeText:'請輸入英文' 61 }, 62 { 63 name:'numberAndApl', 64 fieldLabel:'字母與數字', 65 allowBlank:false, 66 blankText:'不能為空', 67 vtype:'alphanum', 68 vtypeText:'只能是數字和字母' 69 }, 70 { 71 xtype:'textfield', 72 name:'url', 73 fieldLabel:'網址', 74 allowBlank:false, 75 blankText:'不能為空', 76 vtype:'url',//如:http://www.baidu.com 77 vtypeText:'請輸入正確的網址格式' 78 }, 79 { 80 name:'youzheng', 81 fieldLabel:'郵政編碼', 82 allowBlank:false, 83 blankText:'不能為空', 84 regex:/^[1-9]{1}(\d){5}$/, 85 regexText:'請輸入正確的郵政編碼' 86 }, 87 { 88 xtype:'textfield', 89 name:'chinese', 90 fieldLabel:'漢字', 91 allowBlank:false, 92 blankText:'不能為空', 93 regex:/^[\u4E00-\u9FA5]+$/, 94 regexText:'請輸入漢字' 95 }, 96 { 97 xtype:'textfield', 98 name:'telephone', 99 fieldLabel:'手機號碼', 100 allowBlank:false, 101 blankText:'不能為空', 102 regex:/^1[\d]{10}$/, 103 regexText:'手機號碼必須是1開頭的,后面跟10位數字結尾' 104 }, 105 { 106 xtype:'textfield', 107 name:'phone', 108 fieldLabel:'電話號碼', 109 allowBlank:false, 110 blankText:'電話號碼不能空', 111 regex:/^0(\d{2}|\d{3})\-(\d{7}|\d{8})$/, 112 regexText:'電話號碼必須如:0xx-1234344' 113 }, 114 { 115 xtype:'textfield', 116 name:'ip', 117 fieldLabel:'ip地址', 118 allowBlank:false, 119 blankText:'不能為空', 120 regex:/^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/, 121 regexText:'請輸入Ip地址' 122 }, 123 { 124 xtype:'textfield', 125 name:'id', 126 fieldLabel:'身份證', 127 allowBlank:false, 128 blankText:'不能為空', 129 regex:/(^\d{15}$)|(^\d{17}([0-9]|[x,X])$)/, 130 regexText:'請輸入正確的身份證號碼,15位或者18位...15全為數字,18位最后一位可能是數字也可能是x', 131 }, 132 { 133 xtype:'textfield', 134 name:'time', 135 fieldLabel:'使用自定義時間格式', 136 allowBlank:false, 137 blankText:'不能為空', 138 vtype:'time' 139 } 140 ], 141 url: 'add_user', 142 buttons:[{ 143 text:'Submit', 144 handler:function(){ 145 //獲取基本的表單 146 var biaodan=this.up('form').getForm(); 147 if(biaodan.isValid()){//提交前先驗證 148 biaodan.submit({ 149 success:function(biaodan,action){ 150 Ext.Msg.alert('Success',action.result.msg); 151 }, 152 failure:function(form,action){ 153 Ext.Msg.alert('Failed',action.result.msg); 154 } 155 }); 156 157 } else{//顯示驗證錯誤信息 158 159 Ext.Msg.alert('無效輸入','請輸入正確的信息!'); 160 } 161 162 } 163 164 }], 165 166 renderTo:document.body 167 }); 168 169 170 });