ExtJS 的表单验证机制(Form Validation)

在 Extjs 中，表单(form)提供了各种各样的验证机制和方法，在这里总结一下

在讲解表单验证前需要先说一下错误提示(Tips)的配置

在 Ext.onReady 中添加以下两行代码：

[javascript]  view plain copy

1. //初始化组件的信息提示功能  
2. Ext.QuickTips.init();  
3. //指示错误提示出现的方式  
4. Ext.form.Field.prototype.msgTarget = 'under';<span style="font-family: SimSun; ">      </span>  

msgTarget 可以是以下选项：
qtip       当鼠标移动到控件上面时显示提示
title      在浏览器的标题显示
under      在控件的底下显示提示 
side       在控件右边显示一个错误图标，鼠标指向图标时显示提示
id         提示显示在指定id的HTML元件中

各表单元素的提示方式也可以通过修改各项的 msgTarget 属性来配置

[javascript]  view plain copy

1. {    
2.     xtype      : 'textfield',    
3.     fieldLabel : '编号' ,    
4.     name       : 'id' ,    
5.     allowBlank : false ,    
6.     msgTarget  : 'qtip'    
7. }  

  

各种各样的表单验证类型

1，空值验证

[javascript]  view plain copy

1. //是否允许空值  
2. allowBlank : false  
3. //发生空值错误时的提示  
4. blankText : '不能为空'  

2，长度限制

[javascript]  view plain copy

1. //最小长度限制和其错误提示  
2. minLength : Number   
3. minLengthText : String  
4. //最大长度限制和其错误提示   
5. maxLength : Number   
6. maxLengthText : String  

3，vtype验证

[javascript]  view plain copy

1. vtype : 'email'   
2. vtypeText : '不是有效的邮箱地址'  

其中 vtype 的可选：
1. alpha        //只能输入字母，无法输入其他（如数字，特殊符号等）  
2. alphanum     //只能输入字母和数字，无法输入其他  
3. email        //email验证，要求的格式是 "langsin@gmail.com"  
4. url          //url格式验证，要求的格式是 http://www.langsin.com

4，自定义vtype验证器

[javascript]  view plain copy

1. //先用 Ext.apply 方法添加自定义的 password 验证器    
2. Ext.apply(Ext.form.VTypes,{    
3.     password : function(val,field){             //val指的是文本框的值，field指的是文本框组件  
4.         if(field.confirmTo){                    //confirmTo是我自定义的配置参数，一般用来保存另一个组件的id    
5.             var pwd=Ext.get(field.confirmTo);   //取得confirmTo组件的值    
6.             return (val==pwd.getValue());    
7.         }    
8.         return true;    
9.     }    
10. });  
11. //配置items参数    
12. items:[    
13.     {    
14.         fieldLabel  : "密码",    
15.         id          : "pass1",    
16.     },{    
17.         fieldLabel  : "确认密码",    
18.         id          : "pass2",    
19.         vtype       : "password",//自定义的验证类型    
20.         vtypeText   : "两次密码不一致！",    
21.         confirmTo   : "pass1",//要比较的另外一个的组件的id    
22.     }    
23. ]  

5，使用正则表达式 RegExp

[javascript]  view plain copy

1. //js的正则表达式放在 /...../ 之间；[/u4e00-/u9fa5]表示只能输入中文  
2. regex       : /[/u4e00-/u9fa5]/,      
3. regexText   : "只能输入中文!",