快捷導(dǎo)航

javascript使用正則控制input輸入框允許輸入的值方法大全

更新時(shí)間：2014年06月19日 09:16:16 投稿：hebedich

在做項(xiàng)目的時(shí)候，我們經(jīng)常會(huì)遇到控制input輸入框允許輸入的值為數(shù)字，字母，漢字或者混排的情況，那么我們?cè)趺磥硖幚砟?，下面我們就來探討怎么通過用javascript正則來實(shí)現(xiàn)

1、只允許輸入數(shù)字

<input name="username" type="text" onkeyup="value=this.value.replace(/\D+/g,'')">

2、只允許輸入英文字母、數(shù)字和下劃線(以下二種方法實(shí)現(xiàn))

<input name="username" type="text" style="ime-mode:disabled">
<input name="username" type="text" onkeyup="value=value.replace(/[^\w\.\/]/ig,'')">

3、只允許輸入英文字母、數(shù)字和=@#

<input name="username" type="text" onkeyup="value=value.replace(/[^\w=@#]|_/ig,'')">

4、只允許輸入英文大寫字母和數(shù)字

<input name="name" type="text" value="只錄入大寫字母和數(shù)字" style="color:gray" onfocus="this.value='';this.style.color='black'" onkeyup="this.value=this.value.replace(/[^A-Z0-9]/gi,'');this.value=this.value.toLocaleUpperCase();

5、只允許輸入漢字

<input name="username" type="text" onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')">

【過濾文字輸入】

TextField.restrict = "此處為可輸入的內(nèi)容";
field.restrict = "^此處為禁止輸入的內(nèi)容";

restrict屬性支持一些類似正則表達(dá)式的樣式:

field.restrict = "a-zA-z"; //只允許大小字母
field.restrict = "a-zA-z "; //只允許字母和空格
field.restrict = "0-9"; //只允許數(shù)字
field.restrict = "^abcdefg"; //除了小寫字母abcdefg不允許外,其它都允許
field.restrict = "^a-z"; //所有小寫字母都不允許,但是,其它內(nèi)容都允許,包括大寫字母
field.restrict = "0-9^5"; //只允許數(shù)字,但5例外

讓restrict字符包含具有特殊意義的字母(例如-和^):

field.restrict = "0-9\\-"; //允許數(shù)字和破折號(hào)
field.restrict = "0-9\\^"; //允許數(shù)字和^
field.restrict = "0-9\\\\"; //允許數(shù)字和反斜杠

你也可以使用Unicode轉(zhuǎn)義序列,指定允許的內(nèi)容.例如:

field.restrict = "^\u001A";

注意:ActionScript有區(qū)分大小寫的,如果restrict屬性設(shè)為abc,允許字母的大寫形式(A,B和C)輸入時(shí)會(huì)變成小寫對(duì)待形式(a,b和c),反之亦然.restrict屬性只影響用戶可以輸入的內(nèi)容,腳本可將任何文本放入文本字段中.

您可能感興趣的文章:

相關(guān)文章

完美兼容多瀏覽器的js判斷圖片路徑代碼匯總
本文給大家匯總分享了幾種使用javascript實(shí)現(xiàn)判斷圖片路徑是否存在的代碼，都是平時(shí)項(xiàng)目中用到過的，這里總結(jié)一下，有需要的小伙伴可以參考下。
2015-04-04
jQuery實(shí)現(xiàn)動(dòng)態(tài)添加、刪除按鈕及input輸入框的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)動(dòng)態(tài)添加、刪除按鈕及input輸入框的方法,涉及jQuery事件響應(yīng)及頁面元素動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2017-04-04
前端將dom轉(zhuǎn)換成圖片的方法(使用dom-to-image)
這篇文章主要介紹了使用輕量級(jí)的dom-to-image插件將DOM元素轉(zhuǎn)換為圖片并下載,該插件支持多種圖片格式,如SVG、PNG、JPEG等,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2025-01-01
純js實(shí)現(xiàn)html轉(zhuǎn)pdf的簡(jiǎn)單實(shí)例(推薦)
下面小編就為大家?guī)硪黄僯s實(shí)現(xiàn)html轉(zhuǎn)pdf的簡(jiǎn)單實(shí)例(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-02-02
5個(gè)你不知道的JavaScript字符串處理庫(小結(jié))
這篇文章主要介紹了5個(gè)你不知道的JavaScript字符串處理庫，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-06-06
JavaScript獲取flash對(duì)象與網(wǎng)上的有所不同
關(guān)于js獲取flash對(duì)象，網(wǎng)上有非常多的例子，但不是我想要的，經(jīng)測(cè)試整理，因此本文誕生了
2014-04-04
淺談es6語法 (Proxy和Reflect的對(duì)比)
下面小編就為大家?guī)硪黄獪\談es6語法 (Proxy和Reflect的對(duì)比)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-10-10
jquery實(shí)用技巧之輸入框提示語句
輸入有效信息時(shí)會(huì)有一些提示語，比如“請(qǐng)輸入用戶名”和“請(qǐng)輸入密碼”等語言，這篇文章就為大家介紹js實(shí)用技巧之輸入框提示語句的實(shí)現(xiàn)方法，感興趣的小伙伴們可以參考一下
2016-07-07
BootStrapTable 單選及取值的實(shí)現(xiàn)方法
學(xué)習(xí)bootstrapTable 一直沒有找到單選框的選定的和取值的教程,接下來通過本文給大家分享BootStrapTable 單選及取值的實(shí)現(xiàn)方法，非常不錯(cuò)，需要的朋友參考下
2017-01-01
JS 仿支付寶input文本輸入框放大組件的實(shí)例
下面小編就為大家?guī)硪黄狫S 仿支付寶input文本輸入框放大組件的實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-11-11