ExtJS4的文本框(textField)使用正則表達式進行驗證(Regex)的方法
Extjs的Regex的驗證屬性分兩種情況,一種是只有紅色提示框;另一種是在提示框邊會出現(xiàn)一個類似批注的提示信息,不過在頁面加載時要加上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: "電話號碼只能為數(shù)字",
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:'請輸入正確的整數(shù)',
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 : "輸入的身份證號碼不符合規(guī)定!\n15位號碼應(yīng)全為數(shù)字,18位號碼末位可以為數(shù)字或X",
正則表達式用于字符串處理、表單驗證等場合,實用高效?,F(xiàn)將一些常用的表達式收集于此,以備不時之需。
匹配中文字符的正則表達式: [\u4e00-\u9fa5]
評注:匹配中文還真是個頭疼的事,有了這個表達式就好辦了
匹配雙字節(jié)字符(包括漢字在內(nèi)):[^\x00-\xff]
評注:可以用來計算字符串的長度(一個雙字節(jié)字符長度計2,ASCII字符計1)
匹配空白行的正則表達式:\n\s*\r
評注:可以用來刪除空白行
匹配HTML標記的正則表達式:<(\S*?)[^>]*>.*?|<.*? />
評注:網(wǎng)上流傳的版本太糟糕,上面這個也僅僅能匹配部分,對于復(fù)雜的嵌套標記依舊無能為力
匹配首尾空白字符的正則表達式:^\s*|\s*$
評注:可以用來刪除行首行尾的空白字符(包括空格、制表符、換頁符等等),非常有用的表達式
匹配Email地址的正則表達式:\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*
評注:表單驗證時很實用
匹配網(wǎng)址URL的正則表達式:[a-zA-z]+://[^\s]*
評注:網(wǎng)上流傳的版本功能很有限,上面這個基本可以滿足需求
匹配帳號是否合法(字母開頭,允許5-16字節(jié),允許字母數(shù)字下劃線):^[a-zA-Z][a-zA-Z0-9_]{4,15}$
評注:表單驗證時很實用
匹配國內(nèi)電話號碼:\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位數(shù)字
匹配身份證:\d{15}|\d{18}
評注:中國的身份證為15位或18位
匹配ip地址:\d+\.\d+\.\d+\.\d+
評注:提取ip地址時有用
匹配特定數(shù)字:
^[1-9]\d*$ //匹配正整數(shù)
^-[1-9]\d*$ //匹配負整數(shù)
^-?[1-9]\d*$ //匹配整數(shù)
^[1-9]\d*|0$ //匹配非負整數(shù)(正整數(shù) + 0)
^-[1-9]\d*|0$ //匹配非正整數(shù)(負整數(shù) + 0)
^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$ //匹配正浮點數(shù)
^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$ //匹配負浮點數(shù)
^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$ //匹配浮點數(shù)
^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$ //匹配非負浮點數(shù)(正浮點數(shù) + 0)
^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0$ //匹配非正浮點數(shù)(負浮點數(shù) + 0)
評注:處理大量數(shù)據(jù)時有用,具體應(yīng)用時注意修正
匹配特定字符串:
^[A-Za-z]+$ //匹配由26個英文字母組成的字符串
^[A-Z]+$ //匹配由26個英文字母的大寫組成的字符串
^[a-z]+$ //匹配由26個英文字母的小寫組成的字符串
^[A-Za-z0-9]+$ //匹配由數(shù)字和26個英文字母組成的字符串
^\w+$ //匹配由數(shù)字、26個英文字母或者下劃線組成的字符串
評注:最基本也是最常用的一些表達式
Ext.onReady(function(){
Ext.QuickTips.init();
});
下面給大家介紹下ExtJS textField 關(guān)于驗證(Regex)的一些屬性說明
ExtJS的textField 本身具備驗證輸入值的一些屬性和方法,這些屬性和方法都在config參數(shù)中進行配置。
1:是否允許空值
allowBlank : Boolean
如果是true,則允許,否則不允許,默認是true。
blankText : String
如果allowBlank 設(shè)置為true,并且那個textField的值為空,則會顯示blankText屬性的字符串以給出錯誤提示。
2:最長字符和最短字符
maxLength : Number
最長字符(可以達到)
maxLengthText : String
超出設(shè)定的最長字符時,會顯示maxLengthText屬性的字符串以給出錯誤提示。
minLength : Number
最短字符(可以達到)
minLengthText : String
不足設(shè)定的最短字符時,會顯示minLengthText屬性的字符串以給出錯誤提示。
3:正則表達式
regex : RegExp
設(shè)定正則表達式,eg:/^[abc]$/
regexText : String
輸入值違反正則表達式時,會顯示regexText屬性的字符串以給出錯誤提示。
可以通過方法isValid( Boolean preventMark ) : Boolean 來得知輸入值是否滿足所有的限制要求。
注意:
所有的錯誤提示,分兩種,一種是在textField下底框上加上紅色波浪線,另一種是顯示相應(yīng)的錯誤提示字符串,同時給出紅色波浪線。
后一種方法需要調(diào)用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();
});
以上內(nèi)容是小編給大家介紹的ExtJS4的文本框(textField)使用正則表達式進行驗證(Regex)的方法,希望對大家有所幫助!
- Extjs grid添加一個圖片狀態(tài)或者按鈕的方法
- ExtJS[Desktop]實現(xiàn)圖標換行示例代碼
- 解決Extjs上傳圖片無法預(yù)覽的解決方法
- ExtJs之帶圖片的下拉列表框插件
- ExtJS 4.2 Grid組件單元格合并的方法
- ExtJS4給Combobox設(shè)置列表中的默認值示例
- ExtJS4如何自動生成控制grid的列顯示、隱藏的checkbox
- ExtJS4 表格的嵌套 rowExpander應(yīng)用
- extJS中常用的4種Ajax異步提交方式
- extjs4 treepanel動態(tài)改變行高度示例
- ExtJS4中的requires使用方法示例介紹
- extjs4圖表繪制之折線圖實現(xiàn)方法分析
相關(guān)文章
iOS中使用正則表達式NSRegularExpression 來驗證textfiled輸入的內(nèi)容
一個正則表達式(regexp)是由元字符和文字數(shù)字的文本字符,或者“文字的”(abc,123,及其他)混合組合而成的文本模式。 該類型用于匹配文本字符——并附有匹配的結(jié)果,是成功還是失敗。 Regexps 主要用于規(guī)則文本匹配以及搜索和替換。2015-09-09正則表達式替換table表格中的樣式與空標記(保留rowspan與colspan)
最近幾天的勞動成果,用正則表達式去除表格中的樣式與class方便后臺編輯的操作,在編寫過程中不斷進步,后續(xù)將不定時更新,需要的朋友可以參考下2020-04-04