extjs表单FormPanel验证

在Extjs中，FormPane表单提供了各种各样的验证，先总结一下

在讲解表单验证前需要说一下和其相关的一下设置

//在onReady的function（{}）添加以下两行代码， 
Ext.QuickTips.init();   //为组件提供提示信息功能，form的主要提示信息就是客户端验证的错误信息。 
Ext.form.Field.prototype.msgTarget='side';         //指示错误出现的方式，包含的值为

qtip-当鼠标移动到控件上面时显示提示  //默认值为qtip，使用此种方式必须声明Ext.QuickTips.init();   进行初始化
title-在浏览器的标题显示

under-在控件的底下显示错误提示 
side-在控件右边显示一个错误图标，鼠标指向图标时显示错误提示. 默认值. 
id-[element id]错误提示显示在指定id的HTML元件中

表单项的显示错误的方式也可以修改各项的msgTarget属性

例如：

Js代码  

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

上面说了下和表单验证相关的一些设置，我们现在来看一下和表单验证相关的属性及他们验证的顺序

1。和表单验证相关的熟悉及验证顺序（注意我们只说一些常用的，其他的情况属性请看相关的API）

1.1是否为空

allowBlank : Boolean 
blankText : String

1.2输入数据长度限制

minLength : Number 
minLengthText : String 
maxLength : Number 
maxLengthText : String

1.3使用vtype验证

vtype : String 
vtypeText : String

1.4使用validator编写自定义函数验证

validator : Function

1.5使用自己编写的正则表达式regex

regex : RegExp 
regexText : String

从上面可以看出Extjs提供了相当灵活的验证方式，并且提供了从简单到复杂的验证，可以根据项目的具体需要而进行选择使用那些验证方式

根据本人的爱好，更喜欢使用vtype验证，在Ext.form.VTypes中提供了几个常用的验证方式，在表单中只需要写下vtype:'email'，即可进行email信息的验证，而不需要写一大堆的正则表达式和相应的错误提示信息。如果Ext.form.VTypes默认的选项不能满足用户的需求，还可以进行扩展，当业务逻辑发生变化时只需要修改一处即可。

下面代码是扩展Ext.form.VTypes方式，希望启动抛砖引玉作用

Js代码  

1. //扩展VTypes增加id验证方式,和年龄验证  
2. Ext.apply(Ext.form.VTypes,{  
3.         'age' : function(_v){  
4.             if(/^\d+$/.test(_v)){//判断必须是数字    
5.                 var _age = parseInt(_v);  
6.                 //增加业务逻辑,小于100的数字才符合年龄  
7.                 if(0 < _age && _age <100){  
8.                     return true ;  
9.                 }  
10.             }  
11.             return false ;  
12.         },  
13.         ageText : '年龄必须为数字，并且不能超过100岁，格式为23' , //出错信息后的默认提示信息      
14.     ageMask:/[0-9]/i  //键盘输入时的校验  
15. })  
16.   
17.   
18. Ext.onReady(function(){  
19.     Ext.QuickTips.init();  //为组件提供提示信息功能，form的主要提示信息就是客户端验证的错误信息。  
20.     Ext.form.Field.prototype.msgTarget='side';           
21.     var form = new Ext.form.FormPanel({  
22.             frame : true ,  
23.             defaultType : 'textfield' ,  
24.             buttonAlign : 'center' ,  
25.             labelAlign : 'right' ,  
26.             labelWidth : 70 ,  
27.             items : [  
28.                 {  
29.                     xtype : 'textfield',  
30.                     fieldLabel : '编号' ,  
31.                     name : 'id' ,  
32.                     allowBlank : false ,  
33.                     msgTarget : 'qtip'  
34.                 },  
35.                 {  
36.                     fieldLabel : '名称' ,  
37.                     name : 'name' ,  
38.                     regex : /[\u4e00-\u9fa5]/,     //正则表达式在/...../之间. [\u4e00-\u9fa5] : 只能输入中文.    
39.                     regexText:"只能输入中文!",       //正则表达式错误提示    
40.                     allowBlank : false             //此验证依然有效.不许为空.    
41.                 },{  
42.                     fieldLabel : '年龄' ,  
43.                     name : 'age',  
44.                     allowBlank : false ,  
45.                     /* 
46.                     minLength : 1 , 
47.                     minText: '最少输入1位数字', 
48.                     maxLength : 3 , 
49.                     minText: '最多输入3位数字', 
50.                     */  
51.                     vtype : 'age'//,  
52.                     //vtypeText : '覆盖age默认的错误提示'   
53.                 }  
54.             ] ,  
55.             buttons : [  
56.                 {  
57.                     text : '确定' ,  
58.                     handler : function(){  
59.                         form.getForm().isValid();  
60.                     }  
61.                       
62.                 }   
63.             ]  
64.       
65.     });  
66.   
67. });