这几天忙这忙那的,几天工作之余继续我的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.body167 }); 168 169 170 });