實(shí)用干貨：El-input 各種輸入限制的正則整理
1. 干貨速覽
對(duì)于正則表達(dá)式，不知道大家有沒(méi)有這么一種感覺(jué)。就是在學(xué)的時(shí)候，感覺(jué)特別會(huì)，但到了用的時(shí)候，還得要老老實(shí)實(shí)去搜。
至于原因呢，我想了想，主要還是因?yàn)槠匠Ｓ玫拇螖?shù)少。所以每當(dāng)上陣用的時(shí)候，總感覺(jué)白學(xué)了。
但其實(shí)呢，在項(xiàng)目中真正會(huì)用到正則的情況，也就那么幾種。
于是，為了后期再用到正則時(shí)，能提高效率，我把最常用的一些情況整理了下來(lái)，以備復(fù)用，特此分享給朋友們！
當(dāng)然，整理的肯定不可能是萬(wàn)能的，最重要的還是要在此基礎(chǔ)上，隨機(jī)應(yīng)變做改動(dòng)。
為節(jié)約時(shí)間，正則大佬，請(qǐng)注意繞行哈！
2. 干貨詳細(xì)
先過(guò)一遍常用正則符號(hào)，再分開列舉一下常用正則限制，最后做小結(jié)。
（1）常用的正則符號(hào)
開始之前，先過(guò)一遍常用的正則表達(dá)式符號(hào)：
（2）金額輸入最常用的正則限制
限制input輸入框只能輸入數(shù)字和小數(shù)點(diǎn)、保留兩位小數(shù)、千分位逗號(hào)分割的正則表達(dá)式。
<el-input v-model="input" @input="handleInput" />
const handleInput = (val) => {
input.value = onlyNumOnePoint(val);
}
const onlyNumOnePoint = (number_only) => {
// 先把非數(shù)字的都替換掉，除了數(shù)字和小數(shù)點(diǎn)
number_only = number_only.replace(/[^\d.]/g, "");
// 第一位0開頭，0后面為數(shù)字，則過(guò)濾掉，取后面的數(shù)字
number_only = number_only.replace(/^0+(\d)/, '$1');
// 必須保證第一個(gè)為數(shù)字而不是小數(shù)點(diǎn)
number_only = number_only.replace(/^\./g, "");
// 保證只有出現(xiàn)一個(gè)小數(shù)點(diǎn)而沒(méi)有多個(gè)小數(shù)點(diǎn)
number_only = number_only.replace(/\.{2,}/g, ".");
// 保證小數(shù)點(diǎn)只出現(xiàn)一次，而不能出現(xiàn)兩次以上
number_only = number_only.replace(".","$#$").replace(/\./g, "").replace("$#$", ".");
// 保證只能輸入一個(gè)小數(shù)
// number_only = number_only.replace(/^(\-)*(\d+)\.(\d).*$/, '$1$2.$3');
// 保證只能輸入兩個(gè)小數(shù)
number_only = number_only.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');
// 千分位逗號(hào)分割
number_only = number_only.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
return number_only;
}（3）大小寫字母 數(shù)字 下劃線
限制input輸入框只能輸入大小寫字母、數(shù)字、下劃線的正則表達(dá)式。
<el-input v-model="input" @input="handleInput" />
const handleInput = (val) => {
input.value = val.replace(/[^\w]/g,'');
}（4）小寫字母 數(shù)字 下劃線
限制input輸入框只能輸入小寫字母、數(shù)字、下劃線的正則表達(dá)式。
<el-input v-model="input" @input="handleInput" />
const handleInput = (val) => {
input.value = val.replace(/[^a-z0-9_]/g,'');
}（5）數(shù)字 小數(shù)點(diǎn)
限制input輸入框只能輸入數(shù)字和小數(shù)點(diǎn)的正則表達(dá)式。
<el-input v-model="input" @input="handleInput" />
const handleInput = (val) => {
input.value = val.replace(/[^\d.]/g,'');
}（6）中文
限制input輸入框只能輸入中文的正則表達(dá)式。
<el-input v-model="input" @input="handleInput" />
const handleInput = (val) => {
input.value = val.replace(/[^\u4e00-\u9fa5]/g,'');
}（7）排除英文標(biāo)點(diǎn)
限制input輸入框除了英文的標(biāo)點(diǎn)符號(hào)以外的正則表達(dá)式。
<el-input v-model="input" @input="handleInput" />
const handleInput = (val) => {
input.value = val.replace(/^[^!@#$%^&*()-=+]/g,'');
}小結(jié)
在項(xiàng)目中真正會(huì)用到正則的情況，也就那么幾種。
上面把最常用的幾種 el-input 各種輸入限制的正則，做了最簡(jiǎn)潔的整理。
朋友們?cè)谑褂谜齽t時(shí)，可按分類去做參考，并按個(gè)人需求做細(xì)小改動(dòng)。
