表單驗(yàn)證實(shí)例(空驗(yàn)證,密碼確認(rèn)驗(yàn)證,email驗(yàn)證, 自定義驗(yàn)證, 正則表達(dá)式驗(yàn)證(推薦) )
//放在onReady的function(){}中
Ext.QuickTips.init(); //為組件提供提示信息功能,form的主要提示信息就是客戶端驗(yàn)證的錯(cuò)誤信息。
Ext.form.Field.prototype.msgTarget='side'; //提示的方式,枚舉值為
qtip-當(dāng)鼠標(biāo)移動(dòng)到控件上面時(shí)顯示提示
title-在瀏覽器的標(biāo)題顯示,但是測(cè)試結(jié)果是和qtip一樣的
under-在控件的底下顯示錯(cuò)誤提示
side-在控件右邊顯示一個(gè)錯(cuò)誤圖標(biāo),鼠標(biāo)指向圖標(biāo)時(shí)顯示錯(cuò)誤提示. 默認(rèn)值.
id-[element id]錯(cuò)誤提示顯示在指定id的HTML元件中
1.一個(gè)最簡(jiǎn)單的例子:空驗(yàn)證
//空驗(yàn)證的兩個(gè)參數(shù)
1.allowBlank:false//false則不能為空,默認(rèn)為true
2.blankText:string//當(dāng)為空時(shí)的錯(cuò)誤提示信息
js代碼為:
var form1 = new Ext.form.FormPanel({
width:350,
renderTo:"form1",
title:"FormPanel",
defaults:{xtype:"textfield",inputType:"password"},
items:[
{fieldLabel:"不能為空",
allowBlank:false, //不允許為空
blankText:"不能為空", //錯(cuò)誤提示信息,默認(rèn)為This field is required!
id:"blanktest",
}
]
});
2.用vtype格式進(jìn)行簡(jiǎn)單的驗(yàn)證。
在此舉郵件驗(yàn)證的例子,重寫上面代碼的items配置:
items:[
{fieldLabel:"不能為空",
vtype:"email",//email格式驗(yàn)證
vtypeText:"不是有效的郵箱地址",//錯(cuò)誤提示信息,默認(rèn)值我就不說(shuō)了
id:"blanktest",
anchor:"90%"
}
你可以修改上面的vtype為以下的幾種extjs的vtype默認(rèn)支持的驗(yàn)證:
//form驗(yàn)證中vtype的默認(rèn)支持類型
1.alpha //只能輸入字母,無(wú)法輸入其他(如數(shù)字,特殊符號(hào)等)
2.alphanum//只能輸入字母和數(shù)字,無(wú)法輸入其他
3.email//email驗(yàn)證,要求的格式是"langsin@gmail.com"
4.url//url格式驗(yàn)證,要求的格式是[url]http://www.langsin.com[/url]
3.高級(jí)自定義密碼驗(yàn)證
前面的驗(yàn)證都是extjs已經(jīng)提供的,我們也可以自定義驗(yàn)證函數(shù)。
//先用Ext.apply方法添加自定義的password驗(yàn)證函數(shù)(也可以取其他的名字)
Ext.apply(Ext.form.VTypes,{
password:function(val,field){//val指這里的文本框值,field指這個(gè)文本框組件,大家要明白這個(gè)意思
if(field.confirmTo){//confirmTo是我們自定義的配置參數(shù),一般用來(lái)保存另外的組件的id值
var pwd=Ext.get(field.confirmTo);//取得confirmTo的那個(gè)id的值
return (val==pwd.getValue());
}
return true;
}
});
//配置items參數(shù)
items:[{fieldLabel:"密碼",
id:"pass1",
},{
fieldLabel:"確認(rèn)密碼",
id:"pass2",
vtype:"password",//自定義的驗(yàn)證類型
vtypeText:"兩次密碼不一致!",
confirmTo:"pass1",//要比較的另外一個(gè)的組件的id
}
4.使用正則表達(dá)式驗(yàn)證
new Ext.form.TextField({
fieldLabel : "姓名",
name : "author_nam",
regex : /[\u4e00-\u9fa5]/, //正則表達(dá)式在/...../之間. [\u4e00-\u9fa5] : 只能輸入中文.
regexText:"只能輸入中文!", //正則表達(dá)式錯(cuò)誤提示
allowBlank : false //此驗(yàn)證依然有效.不許為空.
正則表達(dá)式詳見:
http://www.tkk7.com/algz/articles/229762.html
posted on 2009-04-01 10:09
紫蝶∏飛揚(yáng)↗ 閱讀(6269)
評(píng)論(5) 編輯 收藏 所屬分類:
EXTJS