ExtJS4的文字框(textField)使用正規表示式進行驗證(Regex)的方法

Extjs的Regex的驗證屬性分兩種情況,一種是隻有紅色提示框；另一種是在提示框邊會出現一個類似批註的提示資訊，不過在頁

面載入時要加上Ext.QuickTips.init();提示框才能正常顯示出來。

特別提示：在屬性regex後要用 /^ 這裡加正則 $/ 把上面的正規表示式包起來否則會報"缺少物件"； 比如：

{
xtype:'textfield',
fieldLabel: '郵政編碼',
name:'postCode',
regex: /^[1-9]\d{5}(?!\d)$/,
regexText : '請輸入正確的郵政編碼',
anchor: '92%'
}
xtype: 'textfield',

1.

regex: /^[\u4e00-\u9fa5]+$/i,
regexText : "請輸入中文",

2.

regex: /^\d+$/,
regexText: "電話號碼只能為數字",

3.

regex: /^(http|https|ftp):\/\/(([A-Z0-9][A-Z0-9_-]*)(\.[A-Z0-9][A-Z0-9_-]*)+)(:(\d+))?\/?/i,
regexText: "請輸入有效的URL地址",

4.

regex:/^[-+]?[\d]+$/,
regexText:'請輸入正確的整數',

5.

regex:/^(?:(?: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]?)$/,
regexText:'請輸入正確的IP地址'

6.

regex:/^((0[1-9]{3})?(0[12][0-9])?[-])?\d{6,8}$/,
regexText:請輸入正確的電話號碼,如:0920-29392929'

7.

regex:/(^0?[1][35][0-9]{9}$)/,
regexText:請輸入正確的手機號碼'

8.請輸入英文字母'

regex:/^[a-zA-Z]+$/,

9.身份證號碼

regex: /(^\d{15}$)|(^\d{17}([0-9]|X)$)/,
regexText : "輸入的身份證號碼不符合規定！\n15位號碼應全為數字，18位號碼末位可以為數字或X",

正規表示式用於字串處理、表單驗證等場合，實用高效。現將一些常用的表示式收集於此，以備不時之需。

匹配中文字元的正規表示式： [\u4e00-\u9fa5]

評註：匹配中文還真是個頭疼的事，有了這個表示式就好辦了

匹配雙位元組字元(包括漢字在內)：[^\x00-\xff]

評註：可以用來計算字串的長度（一個雙位元組字元長度計2，ASCII字元計1）

匹配空白行的正規表示式：\n\s*\r

評註：可以用來刪除空白行

匹配HTML標記的正規表示式：<(\S*?)[^>]*>.*?|<.*? />

評註：網上流傳的版本太糟糕，上面這個也僅僅能匹配部分，對於複雜的巢狀標記依舊無能為力

匹配首尾空白字元的正規表示式：^\s*|\s*$

評註：可以用來刪除行首行尾的空白字元(包括空格、製表符、換頁符等等)，非常有用的表示式

匹配Email地址的正規表示式：\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*

評註：表單驗證時很實用

匹配網址URL的正規表示式：[a-zA-z]+://[^\s]*

評註：網上流傳的版本功能很有限，上面這個基本可以滿足需求

匹配帳號是否合法(字母開頭，允許5-16位元組，允許字母數字下劃線)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$

評註：表單驗證時很實用

匹配國內電話號碼：\d{3}-\d{8}|\d{4}-\d{7}

評註：匹配形式如 0511-4405222 或 021-87888822

匹配騰訊QQ號：[1-9][0-9]{4,}

評註：騰訊QQ號從10000開始

匹配中國郵政編碼：[1-9]\d{5}(?!\d)

評註：中國郵政編碼為6位數字

匹配身份證：\d{15}|\d{18}
評註：中國的身份證為15位或18位

匹配ip地址：\d+\.\d+\.\d+\.\d+
評註：提取ip地址時有用

匹配特定數字：

^[1-9]\d*$　 　 //匹配正整數
^-[1-9]\d*$ 　 //匹配負整數
^-?[1-9]\d*$　　 //匹配整數
^[1-9]\d*|0$　 //匹配非負整數（正整數 + 0）
^-[1-9]\d*|0$　　 //匹配非正整數（負整數 + 0）
^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$　　 //匹配正浮點數
^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$　 //匹配負浮點數
^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$　 //匹配浮點數
^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$　　 //匹配非負浮點數（正浮點數 + 0）
^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0$　　//匹配非正浮點數（負浮點數 + 0）

評註：處理大量資料時有用，具體應用時注意修正

匹配特定字串：

^[A-Za-z]+$　　//匹配由26個英文字母組成的字串
^[A-Z]+$　　//匹配由26個英文字母的大寫組成的字串
^[a-z]+$　　//匹配由26個英文字母的小寫組成的字串
^[A-Za-z0-9]+$　　//匹配由數字和26個英文字母組成的字串
^\w+$　　//匹配由數字、26個英文字母或者下劃線組成的字串

評註：最基本也是最常用的一些表示式

Ext.onReady(function(){ 
Ext.QuickTips.init();
});

下面給大家介紹下ExtJS textField 關於驗證(Regex)的一些屬性說明

ExtJS的textField 本身具備驗證輸入值的一些屬性和方法，這些屬性和方法都在config引數中進行配置。

1：是否允許空值

allowBlank : Boolean

如果是true，則允許，否則不允許，預設是true。

blankText : String

如果allowBlank 設定為true，並且那個textField的值為空，則會顯示blankText屬性的字串以給出錯誤提示。

2：最長字元和最短字元

maxLength : Number

最長字元（可以達到）

maxLengthText : String

超出設定的最長字元時，會顯示maxLengthText屬性的字串以給出錯誤提示。

minLength : Number

最短字元（可以達到）

minLengthText : String

不足設定的最短字元時，會顯示minLengthText屬性的字串以給出錯誤提示。

3：正規表示式

regex : RegExp

設定正規表示式，eg：/^[abc]$/

regexText : String

輸入值違反正規表示式時，會顯示regexText屬性的字串以給出錯誤提示。

可以通過方法isValid( Boolean preventMark ) : Boolean 來得知輸入值是否滿足所有的限制要求。

注意：

所有的錯誤提示，分兩種，一種是在textField下底框上加上紅色波浪線，另一種是顯示相應的錯誤提示字串，同時給出紅色波浪線。

後一種方法需要呼叫Ext.QuickTips.init();才能生效，預設下，只有前一種方式。

Sample：

Ext.onReady(function(){
var _win=new Ext.Window({
title : "找回密碼",
width : 180,
layout:"form",
labelWidth:60,
items:[{
xtype:"textfield",
fieldLabel:"你的姓名" ,
allowBlank:false,
blankText :'姓名不能為空',
minLength :2 ,
minLengthText : "姓名最少2個字元",
maxLength : 4 ,
maxLengthText :"姓名至多4個字元",
width : 80,
regex : /^[abc]{2,4}$/,
regexText : "只能輸入abc"
}],
buttons:[
{
text:'下一步'
},{
text:'取消'
} 
]
});
Ext.QuickTips.init();
_win.show();
});

以上內容是小編給大家介紹的ExtJS4的文字框(textField)使用正規表示式進行驗證(Regex)的方法，希望對大家有所幫助！