ExtJs4表单textfield中的验证使用以及自定义的vtype的使用
这几天忙这忙那的,几天工作之余继续我的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 });
