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     });

 

 

转载于:https://www.cnblogs.com/huzi007/archive/2013/04/22/3036021.html