extjs表單FormPanel驗證

版權聲明：本文為部落客原創文章，未經部落客允許不得轉載。 https://blog.csdn.net/qingfeng812/article/details/20917243

在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方式，希望啟動抛磚引玉作用

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. Ext.onReady(function(){  
17.     Ext.QuickTips.init();  //為元件提供提示資訊功能，form的主要提示資訊就是用戶端驗證的錯誤資訊。  
18.     Ext.form.Field.prototype.msgTarget='side';           
19.     var form = new Ext.form.FormPanel({  
20.             frame : true ,  
21.             defaultType : 'textfield' ,  
22.             buttonAlign : 'center' ,  
23.             labelAlign : 'right' ,  
24.             labelWidth : 70 ,  
25.             items : [  
26.                 {  
27.                     xtype : 'textfield',  
28.                     fieldLabel : '編号' ,  
29.                     name : 'id' ,  
30.                     allowBlank : false ,  
31.                     msgTarget : 'qtip'  
32.                 },  
34.                     fieldLabel : '名稱' ,  
35.                     name : 'name' ,  
36.                     regex : /[\u4e00-\u9fa5]/,     //正規表達式在/...../之間. [\u4e00-\u9fa5] : 隻能輸入中文.    
37.                     regexText:"隻能輸入中文!",       //正規表達式錯誤提示    
38.                     allowBlank : false             //此驗證依然有效.不許為空.    
39.                 },{  
40.                     fieldLabel : '年齡' ,  
41.                     name : 'age',  
43.                     /* 
44.                     minLength : 1 , 
45.                     minText: '最少輸入1位數字', 
46.                     maxLength : 3 , 
47.                     minText: '最多輸入3位數字', 
48.                     */  
49.                     vtype : 'age'//,  
50.                     //vtypeText : '覆寫age預設的錯誤提示'   
52.             ] ,  
53.             buttons : [  
55.                     text : '确定' ,  
56.                     handler : function(){  
57.                         form.getForm().isValid();  
58.                     }  
59.                 }   
60.             ]  
61.     });  
62. });