8ch28資訊網(wǎng)——每日最新資訊28at.com

1. 干貨速覽

對于正則表達式，不知道大家有沒有這么一種感覺。就是在學(xué)的時候，感覺特別會，但到了用的時候，還得要老老實實去搜。8ch28資訊網(wǎng)——每日最新資訊28at.com

至于原因呢，我想了想，主要還是因為平常用的次數(shù)少。所以每當(dāng)上陣用的時候，總感覺白學(xué)了。8ch28資訊網(wǎng)——每日最新資訊28at.com

但其實呢，在項目中真正會用到正則的情況，也就那么幾種。8ch28資訊網(wǎng)——每日最新資訊28at.com

于是，為了后期再用到正則時，能提高效率，我把最常用的一些情況整理了下來，以備復(fù)用，特此分享給朋友們！8ch28資訊網(wǎng)——每日最新資訊28at.com

當(dāng)然，整理的肯定不可能是萬能的，最重要的還是要在此基礎(chǔ)上，隨機應(yīng)變做改動。8ch28資訊網(wǎng)——每日最新資訊28at.com

為節(jié)約時間，正則大佬，請注意繞行哈！8ch28資訊網(wǎng)——每日最新資訊28at.com

8ch28資訊網(wǎng)——每日最新資訊28at.com

2. 干貨詳細(xì)

先過一遍常用正則符號，再分開列舉一下常用正則限制，最后做小結(jié)。8ch28資訊網(wǎng)——每日最新資訊28at.com

（1）常用的正則符號

開始之前，先過一遍常用的正則表達式符號：8ch28資訊網(wǎng)——每日最新資訊28at.com

8ch28資訊網(wǎng)——每日最新資訊28at.com

（2）金額輸入最常用的正則限制

限制input輸入框只能輸入數(shù)字和小數(shù)點、保留兩位小數(shù)、千分位逗號分割的正則表達式。8ch28資訊網(wǎng)——每日最新資訊28at.com

<el-input v-model="input" @input="handleInput" />const handleInput = (val) => {input.value = onlyNumOnePoint(val);}const onlyNumOnePoint = (number_only) => {// 先把非數(shù)字的都替換掉，除了數(shù)字和小數(shù)點number_only = number_only.replace(/[^/d.]/g, "");// 第一位0開頭，0后面為數(shù)字，則過濾掉，取后面的數(shù)字number_only = number_only.replace(/^0+(/d)/, '$1');// 必須保證第一個為數(shù)字而不是小數(shù)點number_only = number_only.replace(/^/./g, "");// 保證只有出現(xiàn)一個小數(shù)點而沒有多個小數(shù)點number_only = number_only.replace(//.{2,}/g, ".");// 保證小數(shù)點只出現(xiàn)一次，而不能出現(xiàn)兩次以上number_only = number_only.replace(".","$#$").replace(//./g, "").replace("$#$", ".");// 保證只能輸入一個小數(shù)// number_only = number_only.replace(/^(/-)*(/d+)/.(/d).*$/, '$1$2.$3');// 保證只能輸入兩個小數(shù)number_only = number_only.replace(/^(/-)*(/d+)/.(/d/d).*$/,'$1$2.$3');// 千分位逗號分割 number_only = number_only.replace(//B(?=(/d{3})+(?!/d))/g, ',');return number_only;}

（3）大小寫字母 數(shù)字 下劃線

限制input輸入框只能輸入大小寫字母、數(shù)字、下劃線的正則表達式。8ch28資訊網(wǎng)——每日最新資訊28at.com

<el-input v-model="input" @input="handleInput" />const handleInput = (val) => {input.value = val.replace(/[^/w]/g,'');}

（4）小寫字母 數(shù)字 下劃線

限制input輸入框只能輸入小寫字母、數(shù)字、下劃線的正則表達式。8ch28資訊網(wǎng)——每日最新資訊28at.com

<el-input v-model="input" @input="handleInput" />const handleInput = (val) => {input.value = val.replace(/[^a-z0-9_]/g,'');}

（5）數(shù)字 小數(shù)點

限制input輸入框只能輸入數(shù)字和小數(shù)點的正則表達式。8ch28資訊網(wǎng)——每日最新資訊28at.com

<el-input v-model="input" @input="handleInput" />const handleInput = (val) => {input.value = val.replace(/[^/d.]/g,'');}

（6）中文

限制input輸入框只能輸入中文的正則表達式。8ch28資訊網(wǎng)——每日最新資訊28at.com

<el-input v-model="input" @input="handleInput" />const handleInput = (val) => {input.value = val.replace(/[^/u4e00-/u9fa5]/g,'');}

（7）排除英文標(biāo)點

限制input輸入框除了英文的標(biāo)點符號以外的正則表達式。8ch28資訊網(wǎng)——每日最新資訊28at.com

<el-input v-model="input" @input="handleInput" />const handleInput = (val) => {input.value = val.replace(/^[^!@#$%^&*()-=+]/g,'');}

小結(jié)

在項目中真正會用到正則的情況，也就那么幾種。8ch28資訊網(wǎng)——每日最新資訊28at.com

上面把最常用的幾種 el-input 各種輸入限制的正則，做了最簡潔的整理。8ch28資訊網(wǎng)——每日最新資訊28at.com

朋友們在使用正則時，可按分類去做參考，并按個人需求做細(xì)小改動。8ch28資訊網(wǎng)——每日最新資訊28at.com

本文鏈接：http://www.tebozhan.com/showinfo-26-79299-0.html實用干貨：El-input 各種輸入限制的正則整理

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： Tailwind CSS，值得2024年的你一試嗎？

下一篇： 我們一起聊聊什么是正向代理和反向代理