最近公司開發項目在用ExtJs，碰到驗證的就大概的總結了一些常用的驗證。自定義的驗證主要有兩種方式：一種是單字段的自定義驗證，另一種是多字段間的驗證。對于單字段的驗證主要通過regex配置項指定自定義正規表達式進行驗證，而字段多的驗證可以通過字定義VType類型進行驗證支援。
Ext.apply(Ext.form.VTypes,
{
daterange: function(val, field)
{
var date = field.parseDate(val);
// We need to force the picker to update values to recaluate the disabled dates display
var dispUpd = function(picker)
{
var ad = picker.activeDate;
picker.activeDate = null;
picker.update(ad);
};
if (field.startDateField)
var sd = Ext.getCmp(field.startDateField);
sd.maxValue = date;
if (sd.menu && sd.menu.picker)
{
sd.menu.picker.maxDate = date;
dispUpd(sd.menu.picker);
}
}
else if (field.endDateField)
var ed = Ext.getCmp(field.endDateField);
ed.minValue = date;
if (ed.menu && ed.menu.picker)
ed.menu.picker.minDate = date;
dispUpd(ed.menu.picker);
}
return true;
},
password: function(val, field)
{
if (field.initialPassField)
var pwd = Ext.getCmp(field.initialPassField);
return (val == pwd.getValue());
},
passwordText: '兩次輸入的密碼不一緻！',
chinese:function(val,field)
var reg = /^[/u4e00-/u9fa5]+$/i;
if(!reg.test(val))
return false;
chineseText:'請輸入中文',
age:function(val,field)
try
if(parseInt(val) >= 18 && parseInt(val) <= 100)
return true;
catch(err)
ageText:'年齡輸入有誤',
alphanum:function(val,field)
if(!//W/.test(val))
catch(e)
alphanumText:'請輸入英文字母或是數字,其它字元是不允許的.',
url:function(val,field)
if(/^(http|https|ftp):////(([A-Z0-9][A-Z0-9_-]*)(/.[A-Z0-9][A-Z0-9_-]*)+)(:(/d+))?//?/i.test(val))
urlText:'請輸入有效的URL位址.',
max:function(val,field)
if(parseFloat(val) <= parseFloat(field.max))
maxText:'超過最大值',
min:function(val,field)
if(parseFloat(val) >= parseFloat(field.min))
minText:'小于最小值',
datecn:function(val,field)
var regex = /^(/d{4})-(/d{2})-(/d{2})$/;
if(!regex.test(val)) return false;
var d = new Date(val.replace(regex, '$1/$2/$3'));
return (parseInt(RegExp.$2, 10) == (1+d.getMonth())) && (parseInt(RegExp.$3, 10) == d.getDate())&&(parseInt(RegExp.$1, 10) == d.getFullYear());
datecnText:'請使用這樣的日期格式: yyyy-mm-dd. 例如:2008-06-20.',
integer:function(val,field)
if(/^[-+]?[/d]+$/.test(val))
integerText:'請輸入正确的整數',
minlength:function(val,field)
if(val.length >= parseInt(field.minlen))
return false
minlengthText:'長度過小',
maxlength:function(val,field)
try
{
if(val.length <= parseInt(field.maxlen))
return true;
return false;
}
catch(e)
maxlengthText:'長度過大',
ip:function(val,field)
if((/^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)/.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(val)))
ipText:'請輸入正确的IP位址',
phone:function(val,field)
if(/^((0[1-9]{3})?(0[12][0-9])?[-])?/d{6,8}$/.test(val))
phoneText:'請輸入正确的電話号碼,如:0920-29392929',
mobilephone:function(val,field)
if(/(^0?[1][35][0-9]{9}$)/.test(val))
mobilephoneText:'請輸入正确的手機号碼',
alpha:function(val,field)
if( /^[a-zA-Z]+$/.test(val))
alphaText:'請輸入英文字母'
});
另外一種方式擴充一些VType，基本上是用正在表達式的，友善做驗證了。
：
Ext.form.VTypes["hostnameVal1"] = /^[a-zA-Z][-.a-zA-Z0-9]{0,254}$/;
Ext.form.VTypes["hostnameVal2"] = /^[a-zA-Z]([-a-zA-Z0-9]{0,61}[a-zA-Z0-9]){0,1}([.][a-zA-Z]([-a-zA-Z0-9]{0,61}[a-zA-Z0-9]){0,1}){0,}$/;
Ext.form.VTypes["ipVal"] = /^([1-9][0-9]{0,1}|1[013-9][0-9]|12[0-689]|2[01][0-9]|22[0-3])([.]([1-9]{0,1}[0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])){2}[.]([1-9][0-9]{0,1}|1[0-9]{2}|2[0-4][0-9]|25[0-4])$/;
Ext.form.VTypes["netmaskVal"] = /^(128|192|224|24[08]|25[245].0.0.0)|(255.(0|128|192|224|24[08]|25[245]).0.0)|(255.255.(0|128|192|224|24[08]|25[245]).0)|(255.255.255.(0|128|192|224|24[08]|252))$/;
Ext.form.VTypes["portVal"] = /^(0|[1-9][0-9]{0,3}|[1-5][0-9]{4}|6[0-4][0-9]{3}|65[0-4][0-9]{2}|655[0-2][0-9]|6553[0-5])$/;
Ext.form.VTypes["multicastVal"] = /^((22[5-9]|23[0-9])([.](0|[1-9][0-9]{0,1}|1[0-9]{2}|2[0-4][0-9]|25[0-5])){3})|(224[.]([1-9][0-9]{0,1}|1[0-9]{2}|2[0-4][0-9]|25[0-5])([.](0|[1-9][0-9]{0,1}|1[0-9]{2}|2[0-4][0-9]|25[0-5])){2})|(224[.]0[.]([1-9][0-9]{0,1}|1[0-9]{2}|2[0-4][0-9]|25[0-5])([.](0|[1-9][0-9]{0,1}|1[0-9]{2}|2[0-4][0-9]|25[0-5])))$/;
Ext.form.VTypes["usernameVal"] = /^[a-zA-Z][-_.a-zA-Z0-9]{0,30}$/;
Ext.form.VTypes["passwordVal1"] = /^.{6,31}$/;
Ext.form.VTypes["passwordVal2"] = /[^a-zA-Z].*[^a-zA-Z]/;
Ext.form.VTypes["hostname"]=function(v){
if(!Ext.form.VTypes["hostnameVal1"].test(v)){
Ext.form.VTypes["hostnameText"]="Must begin with a letter and not exceed 255 characters"
return false;
}
Ext.form.VTypes["hostnameText"]="L[.L][.L][.L][...] where L begins with a letter, ends with a letter or number, and does not exceed 63 characters";
return Ext.form.VTypes["hostnameVal2"].test(v);
}
Ext.form.VTypes["hostnameText"]="Invalid Hostname"
Ext.form.VTypes["hostnameMask"]=/[-.a-zA-Z0-9]/;
Ext.form.VTypes["ip"]=function(v){
return Ext.form.VTypes["ipVal"].test(v);
Ext.form.VTypes["ipText"]="1.0.0.1 - 223.255.255.254 excluding 127.x.x.x"
Ext.form.VTypes["ipMask"]=/[.0-9]/;
Ext.form.VTypes["netmask"]=function(v){
return Ext.form.VTypes["netmaskVal"].test(v);
Ext.form.VTypes["netmaskText"]="128.0.0.0 - 255.255.255.252"
Ext.form.VTypes["netmaskMask"]=/[.0-9]/;
Ext.form.VTypes["port"]=function(v){
return Ext.form.VTypes["portVal"].test(v);
Ext.form.VTypes["portText"]="0 - 65535"
Ext.form.VTypes["portMask"]=/[0-9]/;
Ext.form.VTypes["multicast"]=function(v){
return Ext.form.VTypes["multicastVal"].test(v);
Ext.form.VTypes["multicastText"]="224.0.1.0 - 239.255.255.255"
Ext.form.VTypes["multicastMask"]=/[.0-9]/;
Ext.form.VTypes["username"]=function(v){
return Ext.form.VTypes["usernameVal"].test(v);
Ext.form.VTypes["usernameText"]="Username must begin with a letter and cannot exceed 255 characters"
Ext.form.VTypes["usernameMask"]=/[-_.a-zA-Z0-9]/;
Ext.form.VTypes["password"]=function(v){
if(!Ext.form.VTypes["passwordVal1"].test(v)){
Ext.form.VTypes["passwordText"]="Password length must be 6 to 31 characters long";
Ext.form.VTypes["passwordText"]="Password must include atleast 2 numbers or symbols";
return Ext.form.VTypes["passwordVal2"].test(v);
Ext.form.VTypes["passwordText"]="Invalid Password"
Ext.form.VTypes["passwordMask"]=/./;
另外寫一下Extjs form 元件
1、Ext.form.Action
配置項：
success：執行成功後回調的函數，包括兩個參數：form和action
failure：執行失敗後回調的函數，包括兩個參數：form和action
method：表單的送出方式，有效值包括GET、POST
params：傳遞到請求中的參數
url：動作送出的路徑
waitMsg：動作執行時顯示的等待資訊
屬性：
Action.CLIENT_INVALID：用戶端驗證錯誤
Action.CONNECT_FAILURE：通信錯誤
Action.LOAD_FAILURE：加載資料時，沒有包含data屬性的字段被傳回
Action.SERVER_INVALID：服務端驗證錯誤
failureType：錯誤類型
result：包含布爾類型的success屬性和其他屬性，如{success: true, msg: 'ok'}
type：動作類型，可選值有submit和load
Ext.form.Action.Submit：傳回的資訊中要包含一個布爾類型的success屬性和一個可選的errors屬性
Ext.form.Action.Load：傳回的資訊中要包含一個布爾類型的success屬性和一個data屬性
2、Ext.form.BasicForm
baseParams：傳遞到請求中的參數
url：表單預設的送出路徑
fileUpload：表單是否進行檔案上傳
timeout：表單動作的逾時時間，預設為30秒
trackResetOnLoad：是否在表單初次建立時清楚資料
方法：
doAction( String/Object actionName, [Object options] )：執行一個預訂的動作，可用選項包括：
url：動作送出的路徑
method：表單的送出方式，有效值包括GET、POST
params：傳遞到請求中的參數
headers：
success：執行成功後回調的函數，包括兩個參數：form和action
failure：執行失敗後回調的函數，包括兩個參數：form和action
clientValidation：是否用戶端驗證
clearInvalid()：清除表單中所有的無效驗證資訊
findField( String id )：查找表單字段
getValues( [Boolean asString] )：
isDirty()：表單資料是否被更改過
isValid()：用戶端驗證是否成功
load( Object options )：執行表單讀取動作
loadRecord( Record record )：從一個資料記錄中讀取資料到表單中
markInvalid( Array/Object errors )：成批設定表單字段為驗證無效
reset()：重置表單
setValues( Array/Object values )：成批設定表單字段值
submit( Object options )：執行表單送出動作
updateRecord( Record record )：持久化表單資料到記錄集中
3、Ext.form.FormPanel
items：一個元素或元素數組
buttons：一個按鈕配置對象的數組，按鈕将被添加到表單頁腳中
buttonAlign：按鈕的對齊方式，可選值有left、center、right，預設為center
labelWidth：表單标簽的寬度
labelAlign：表單标簽的對齊方式，可選值有left、top、right，預設為left
labelSeparator：字段标簽與字段之間的分隔符，預設為':'
minButtonWidth：按鈕的最小寬度，預設為75
方法：
getForm() : Ext.form.BasicForm
load( Object options )
startMonitoring()
stopMonitoring()
4、Ext.form.Field
配置項：
name：字段名
value：字段的初始化值
disabled：字段是否不可用，預設為false
fieldLabel：字段标簽說明
hideLabel：隐藏字段标簽，預設為false
labelStyle：字段标簽樣式
inputType：預設為text
invalidClass：預設為x-form-invalid
invalidText：字段非法文本提示
msgTarget：錯誤資訊顯示的位置，預設為qtip
qtip：顯示一個浮動的提示資訊
title：顯示一個浏覽器的浮動提示資訊
under：在字段下方顯示一個提示資訊
side：在字段右邊顯示一個提示資訊
readOnly：字段是否隻讀，預設為false
validateOnBlur：字段在失去焦點時被驗證，預設為true
clearInvalid()：
getRawValue()
setRawValue( Mixed value )
getValue()
setValue( Mixed value )
isDirty()：字段值在裝載後是否被修改過
isValid( Boolean preventMark )：目前字段值是否合法
markInvalid( [String msg] )
validate()
reset()
5、Ext.form.Hidden
6、Ext.form.Label
html：
text：
7、Ext.form.TextField
allowBlank：是否允許為空，預設為true
blankText：空驗證失敗後顯示的提示資訊
emptyText：在一個空字段中預設顯示的資訊
grow：字段是否自動伸展和收縮，預設為false
growMin：收縮的最小寬度
growMax：伸展的最大寬度
inputType：字段類型：預設為text
maskRe：用于過濾不比對字元輸入的正規表達式
maxLength：字段允許輸入的最大長度
maxLengthText：最大長度驗證失敗後顯示的提示資訊
minLength：字段允許輸入的最小長度
minLengthText：最小長度驗證失敗後顯示的提示資訊
regex：正規表達式
regexText：正規表達式驗證失敗後顯示的提示資訊
vtype：驗證類型的名字
alpha：限制隻能輸入字母
alphanum：限制隻能輸入字母和數字
url
vtypeText：驗證失敗時的提示資訊
validator：自定義驗證函數
selectOnFocus：當字段得到焦點時自動選擇已存在的文本，預設為false
8、Ext.form.TextArea
配置項：
preventScrollbars：是否禁止出現滾動條，預設為false
9、Ext.form.NumberField
allowDecimals：是否允許輸入小數，預設為true
allowNegative：是否允許輸入負數，預設為true
baseChars：輸入的有效數字集合，預設為'0123456789'
decimalPrecision：數字的精度，預設保留小數點後2位
decimalSeparator：十進制分隔符，預設為'.'
maxValue：允許輸入的最大數值
maxText：超過最大值之後的提示資訊
minValue：允許輸入的最小數值
minText：超過最小值之後的提示資訊
nanText：輸入非有效數值之後的提示資訊
10、Ext.form.Checkbox
boxLabel：複選框的文字描述
checked：複選框是否被選擇，預設為false
handler：當checked值改變時觸發的函數，函數包含兩個參數：checkbox、checked
inputValue：
getValue()：傳回複選框的checked狀态
setValue( Boolean/String checked )：
11、Ext.form.CheckboxGroup
allowBlank：是否允許不選擇，預設為true
blankText：
columns：顯示的列數，可選值包括：固定值auto、數值、數組（整數、小數）
items：對象數組
vertical：是否垂直方向顯示對象，預設為false
12、Ext.form.Radio
getGroupValue()：
setValue( value {String/Boolean} )：
13、Ext.form.RadioGroup
allowBlank：
14、Ext.form.ComboBox
displayField：被顯示在下拉框中的字段名
editable：是否可編輯，預設為true
forceSelection：輸入值是否嚴格為待選清單中存在的值。如果輸入不存在的值，會自動選擇第一個最接近的值。
hiddenName：隐藏字段的名字，如果提供該參數則一個隐藏字段将被建立，用來存儲所選值，當表單送出時在伺服器端可以通過該名字取得清單中的所選值
listWidth：下拉清單的寬度
minListWidth：下拉清單的最小寬度，預設為70像素
loadingText：當下拉框加載資料時顯示的提示資訊，隻有當mode='remote'時才會生效
maxHeight：下拉清單框的最大高度，預設為300像素
minChars：下拉清單框自動選擇前使用者需要輸入的最小字元數量。mode='remote'預設為4，mode='local'預設為0
mode：下拉清單框的資料讀取模式。remote讀取遠端資料，local讀取本地資料
pageSize：下拉清單框的分頁大小。該項設定隻在mode='remote'時生效
queryParam：查詢的名字，預設為'query'，将被傳遞到查詢字元串中
allQuery：一個發往伺服器用來查詢全部資訊的查詢字元串，預設為空字元串''
selectOnFocus：當獲得焦點時立刻選擇一個已存在的清單項。預設為false，此項隻有在editable=true時才會生效
store：清單框綁定的資料源
transform：将頁面中已存在的元素轉換為組合框
lazyInit：延時初始化下拉清單，預設為true
lazyRender：延時渲染，預設為false
triggerAction：設定單擊觸發按鈕時執行的預設操作，有效值包括all和query，預設為query，如果設定為all則會執行allQuery中設定的查詢
typeAhead：設定在輸入過程中是否自動選擇比對的剩餘部分文本（選擇第一個滿足條件的），預設為false
value：初始化組合框中的值
valueField：組合框的值字段
valueNotFoundText：值不存在時的提示資訊
tpl：Ext模闆字元串或模闆對象，可以通過該配置項自定義下拉清單的顯示方式
clearValue()：清空字段目前值
doQuery( String query, Boolean forceAll )：
getValue()：
getStore()：
setValue( String value )：
15、Ext.form.DateField
maxValue：允許選擇的最大日期
maxText：當日期大于最大值時的錯誤提示資訊
minValue：允許選擇的最小時間
minText：當日期小于最小值時的錯誤提示資訊
format：日期顯示格式，預設為“m/d/y”，一般使用“Y-m-d”
Y：四位年份
m：帶字首0的月份
d：帶字首0的日期
y：兩位年份
n：不帶字首0的月份
j：不帶字首0的日期
w：星期的數字，0表示星期日，1代表星期一
showToday：是否顯示今天按鈕，預設為true
altFormats：多個日期輸入格式組成的字元串，不同的格式之間使用“|”進行分割，預設值為'm/d/Y|n/j/Y|n/j/y|m/j/y|n/d/y|m/j/Y|n/d/Y|m-d-y|m-d-Y|m/d|m-d|md|mdy|mdY|d|Y-m-d'
disabledDates：禁止選擇的日期組成的數組
disabledDatesText：選擇禁選日期時顯示的提示資訊
disabledDays：禁止選擇的星期組成的數組，0代表星期日，1代表星期一
disabledDaysText：選擇禁選星期時顯示的提示資訊
invalidText：當日期值非法時顯示的提示資訊
getValue()：取得日期值
16、Ext.form.FieldSet
animCollapse：動畫折疊，預設為false
checkboxToggle：設定是否顯示字段集的checkbox選擇框，預設為false
checkboxName：指定字段集中用于展開或隐藏字段集面闆的checkbox的名字，該屬性隻有在checkboxToggle為true時生效
labelWidth：字段标簽的寬度，可以級聯到子容器
layout：布局，預設為form
17、Ext.form.TimeField
maxValue：清單中允許的最大時間
maxText：當時間大于最大值時的錯誤提示資訊
minValue：清單中允許的最小時間
minText：當時間小于最小值時的錯誤提示資訊
increment：兩個相鄰選項間的時間間隔，預設為15分鐘
format：顯示格式，預設為“g:i A”。一般使用“H:i:s”
H：帶字首0的24小時
i：帶字首0的分鐘
s：帶字首0的秒
invalidText：當時間值非法時顯示的提示資訊
altFormats：多個時間輸入格式組成的字元串，不同的格式之間使用“|”進行分割
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)