首頁 > web前端 > js教程 > Extjs表單常見驗證小結_extjs

Extjs表單常見驗證小結_extjs

WBOY
發布: 2016-05-16 16:56:10
原創
1123 人瀏覽過
複製程式碼 程式碼如下:

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

qtip-當滑鼠移到控制項上面時顯示提示;
title-在瀏覽器的標題顯示,但是測試結果是和qtip一樣的;
under-在控件的底下顯示錯誤提示;
side-在控件右邊顯示一個錯誤圖標,鼠標指向圖標時顯示錯誤提示. 預設值;
id-[element id]錯誤提示顯示在指定id的HTML元件中

1.一個最簡單的例子:空驗證
複製程式碼 程式碼如下:

//空驗證的兩個參數
allowBlank:false//false則不能為空,預設為true
blankText:string//當為空時的錯誤提示訊息

js程式碼為:
複製程式碼 程式碼如下:

var form1 = new Ext.form.FormPanel({
width:350,
render:"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驗證,要求的格式是""
4.url//url格式驗證,要求的格式是http://www.baidu.com

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
}

4.使用正則表達式驗證

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

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板