? ? ? ?應用場景：開發前端交互頁面時，經常遇到金額輸入框、指定小數位數的數字輸入框，單一的正則表達式無法滿足大部分的業務校驗需求，下面總結一個實用巧妙而又靈活的把普通輸入框變成自動校正輸入框的解決方案：

數字（金額）輸入框：

輸入金額：<input id="money">

原生JS自動校正：

let dom = document.getElementById("money"); dom.addEventListener("input", function () {console.log(this.value);let inputValue = this.value;this.value = autoFixedDicimal(this.value, 3, true); // 示例：最多允許3位小數，可以為負數console.log(`\t\t輸入：【${inputValue}】=>【${this.value}】=>轉化為Number類型：【${Number(this.value)}】`); }); /*** 自動校正數字輸入框* @param inputValue 輸入值* @param bitsAfterDot 小數點后最多允許的位數，默認2位* @param allowNegative 是否允許輸入負數，默認否*/ function autoFixedDicimal(inputValue, bitsAfterDot, allowNegative) {// 處理參數的默認值if (bitsAfterDot == null || bitsAfterDot == undefined)bitsAfterDot = 2;allowNegative = allowNegative || false;// 自動校正輸入的數字decimallet value = inputValue;// 先處理符號問題（負數）let mark = "";if (/^-/.test(value)) {mark = "-";}// 如果輸入非數字，則替換為''value = value.replace(/[^\d\.]/g, '');// 必須保證開頭為數字而不是小數點.value = value.replace(/^\./g, '');// 保證小數點.最多出現一次value = value.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.');// 只能輸入兩位小數let reg = new RegExp(`^(\\-)*(\\d+)\\.([\\d]{0,${bitsAfterDot}}).*$`);value = value.replace(reg, '$1$2.$3');value = allowNegative ? mark + value : value;return value; }

測試結果：

??

? ?

???

????

? ?

?

注意事項：

1.輸入框的"input"事件主流瀏覽器都支持，IE的兼容性未測，如果不支持，可增加綁定"propertychange"事件。強大之處在于：輸入框的值改變（鍵盤、鼠標、粘貼）都能檢測到；

2.對于校正后的結果，最好使用Number(value)轉化成Number類型，避免用戶輸入了小數點但小數點后面沒有小數部分（截圖）；

3.如果你不想使用自動校正的功能，這里提供一個比較友好的校驗可能包含有小數的正則表達式：/(^[1-9][0-9]*$|^0$)|((^[1-9][0-9]*|^0)[\.](\d)*$)/? 在光標移開事件blur或者提交前校驗輸入的數字是否合法。

?

最后小記一下：

? ? ? ?之前在實際項目中自己也是花了很多時間寫過類似的自動校驗方法，比較復雜，文末會給出TypeScript版。上面的自動校驗參考的是這篇博客自動校驗，吸取別人的優點，也擴展了其功能。

以前自己寫的TypeScript版：

/*** 金額自動校正* @param value 字符串類型* @param maxLengthAfterDot 小數點后最多允許多少位* @return 過濾后的字符串*/public static filterMoney(value, maxLengthAfterDot): string {// 先遍歷去掉非數字非小數點.的字符let filtered = "";for (let c of value) {if ("0123456789.".includes(c)) {filtered += c;}}// 如果有多個小數點.，則去掉后面多余的小數點.let locationOfDot = filtered.indexOf(".");if (locationOfDot > -1) {filtered = filtered.replace(/\./g, "");filtered = filtered.slice(0, locationOfDot) + "." + filtered.slice(locationOfDot)}// 再用正則去校驗let re = /(^[1-9][0-9]*$|^0$)|((^[1-9][0-9]*|^0)[\.](\d)*$)/if (!re.test(filtered)) {// console.error("輸入金額不合法：", value);filtered = filtered.slice(0, -1);}// 小數點后最多maxLengthAfterDot位let re2 = /[\d]+\.(\d*)$/g;let execArray = re2.exec(filtered);if (execArray && execArray.length > 0 && execArray[1].length > maxLengthAfterDot) {// console.error(`小數點后面長度超過了${maxLength}位`);filtered = filtered.slice(0, -1);}return filtered;} 創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的金额输入框校验和自动校正、支持指定任意位数小数decimal、支持只能输入整数、支持是否允许输入负数等功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。