extjs 表單驗證實例 轉

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


qtip-當鼠標移動到控件上面時顯示提示

title-在瀏覽器的標題顯示，但是測試結果是和qtip一樣的

under-在控件的底下顯示錯誤提示

side-在控件右邊顯示一個錯誤圖標，鼠標指向圖標時顯示錯誤提示. 默認值.

id-[element id]錯誤提示顯示在指定id的HTML元件中

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

//空驗證的兩個參數
1.allowBlank:false//false則不能爲空，默認爲true
2.blankText:string//當爲空時的錯誤提示信息

js代碼爲：
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配置:
items:[
{fieldLabel:"不能爲空",
vtype:"email",//email格式驗證
vtypeText:"不是有效的郵箱地址",//錯誤提示信息,默認值我就不說了
id:"blanktest",
anchor:"90%"
}
你可以修改上面的vtype爲以下的幾種extjs的vtype默認支持的驗證：
//form驗證中vtype的默認支持類型
1.alpha //只能輸入字母，無法輸入其他（如數字，特殊符號等）
2.alphanum//只能輸入字母和數字，無法輸入其他
3.email//email驗證，要求的格式是"[email protected]"
4.url//url格式驗證，要求的格式是[url]http://www.langsin.com[/url]

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


Ext.apply(Ext.form.VTypes,{
"age":function(_v){
if(/^\d$/.test(_v)){ //判斷必須是數字
var _age = parseInt(_v);
if(_age < 200)
return true;
}
return false;
},
"ageText":"該輸入項必須是年齡格式，格式如：23" //出錯信息
"ageMask":/[0-9]/i
});





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


本文來自CSDN博客，轉載請標明出處：http://blog.csdn.net/adolfsabin/archive/2009/05/03/4144273.aspx