快捷導(dǎo)航

Extjs表單常見驗證小結(jié)

更新時間：2014年03月07日 17:30:31 作者：

Extjs表單驗證包括空驗證、用vtype格式進行簡單的驗證、高級自定義密碼驗證、使用正則表達式驗證等等

 
//放在onReady的function(){}中 
Ext.QuickTips.init(); //為組件提供提示信息功能，form的主要提示信息就是客戶端驗證的錯誤信息。 
Ext.form.Field.prototype.msgTarget='side'; //提示的方式，枚舉值為: 

qtip-當(dāng)鼠標(biāo)移動到控件上面時顯示提示;
title-在瀏覽器的標(biāo)題顯示，但是測試結(jié)果是和qtip一樣的;
under-在控件的底下顯示錯誤提示;
side-在控件右邊顯示一個錯誤圖標(biāo)，鼠標(biāo)指向圖標(biāo)時顯示錯誤提示. 默認值;
id-[element id]錯誤提示顯示在指定id的HTML元件中

1.一個最簡單的例子：空驗證

復(fù)制代碼代碼如下:

 
//空驗證的兩個參數(shù) 
allowBlank:false//false則不能為空，默認為true 
blankText:string//當(dāng)為空時的錯誤提示信息 

js代碼為：

復(fù)制代碼代碼如下:

 
var form1 = new Ext.form.FormPanel({ 
width:350, 
renderTo:"form1", 
title:"FormPanel", 
defaults:{xtype:"textfield",inputType:"password"}, 
items:[ 
{fieldLabel:"不能為空", 
allowBlank:false, //不允許為空 
blankText:"不能為空", //錯誤提示信息，默認為This field is required! 
id:"blanktest", 
} 
] 
}); 

2.用vtype格式進行簡單的驗證。
在此舉郵件驗證的例子，重寫上面代碼的items配置:

復(fù)制代碼代碼如下:

 
items:[ 
{fieldLabel:"不能為空", 
vtype:"email",//email格式驗證 
vtypeText:"不是有效的郵箱地址",//錯誤提示信息,默認值我就不說了 
id:"blanktest", 
anchor:"90%" 
} 
你可以修改上面的vtype為以下的幾種extjs的vtype默認支持的驗證： 
//form驗證中vtype的默認支持類型 

1.alpha //只能輸入字母，無法輸入其他（如數(shù)字，特殊符號等）
2.alphanum//只能輸入字母和數(shù)字，無法輸入其他
3.email//email驗證，要求的格式是""
4.url//url格式驗證，要求的格式是http://www.baidu.com

3.高級自定義密碼驗證
前面的驗證都是extjs已經(jīng)提供的，我們也可以自定義驗證函數(shù)。

復(fù)制代碼代碼如下:

 
//先用Ext.apply方法添加自定義的password驗證函數(shù)（也可以取其他的名字） 
Ext.apply(Ext.form.VTypes,{ 
password:function(val,field){//val指這里的文本框值，field指這個文本框組件，大家要明白這個意思 
if(field.confirmTo){//confirmTo是我們自定義的配置參數(shù)，一般用來保存另外的組件的id值 
var pwd=Ext.get(field.confirmTo);//取得confirmTo的那個id的值 
return (val==pwd.getValue()); 
} 
return true; 
} 
}); 
//配置items參數(shù) 
items:[{fieldLabel:"密碼", 
id:"pass1", 
},{ 
fieldLabel:"確認密碼", 
id:"pass2", 
vtype:"password",//自定義的驗證類型 
vtypeText:"兩次密碼不一致！", 
confirmTo:"pass1",//要比較的另外一個的組件的id 
} 

4.使用正則表達式驗證

復(fù)制代碼代碼如下:

 
new Ext.form.TextField({ 
fieldLabel : "姓名", 
name : "author_nam", 
regex : /[\u4e00-\u9fa5]/, //正則表達式在/...../之間. [\u4e00-\u9fa5] : 只能輸入中文. 
regexText:"只能輸入中文!", //正則表達式錯誤提示 
allowBlank : false //此驗證依然有效.不許為空. 

您可能感興趣的文章: