vue element-ui實現(xiàn)input輸入框金額數(shù)字添加千分位
在util.js中定義方法
包含金額添加過濾千分位,驗證金額格式等
const MoneyTest = /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/; // 金額添加千分位 const comdify = function (n) { if(!n) return n; let str = n.split('.'); let re = /\d{1,3}(?=(\d{3})+$)/g; let n1 = str[0].replace(re, "$&,"); return str.length > 1 && str[1] ? `${n1}.${str[1]}` : `${n1}.00`; }; //去除千分位中的‘,' const delcommafy = function (num){ if(!num) return num; num = num.toString(); num = num.replace(/,/gi, ''); return num; }; const valdateFn = function (rule,val,cb) { setTimeout(() => { if(val) { let inputVal = delcommafy(val); if (rule.test(inputVal)) { cb() } else { cb('只能是數(shù)字金額,最多兩位小數(shù)') } } cb() }) } // 驗證金額數(shù)字可以為負數(shù) const moneyValid = function (rule,val,cb) { valdateFn(/((^-?[1-9]\d*)|^-?0)(\.\d{0,2}){0,1}$/,val,cb); }; // 驗證金額數(shù)字不可以為負數(shù) const moneyNValid = function (rule,val,cb) { valdateFn(MoneyTest,val,cb); }; // 獲取輸入框的值 const getInputValue = function (el) { let inputVal = el.target.value || ''; return comdify(delcommafy(inputVal)); };
在組件中使用
在template中
<el-input v-model.trim="form.pastAdjustFee" @blur="inputMoney($event,'pastAdjustFee')"></el-input>
在methods中定義
data(){ return { form:{ pastAdjustFee:'' } } } methods:{ inputMoney(el,name) { this.form[name] = getInputValue(el); } }
總結(jié)
以上所述是小編給大家介紹的vue element-ui實現(xiàn)input輸入框金額數(shù)字添加千分位,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!
相關文章
vue項目實現(xiàn)表單登錄頁保存賬號和密碼到cookie功能
這篇文章主要介紹了vue項目實現(xiàn)表單登錄頁保存賬號和密碼到cookie功能,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2018-08-08vue2+element?ui?中的el-table?選中當前行當前行變色的實現(xiàn)代碼
這篇文章主要介紹了vue2+element?ui?中的el-table?選中當前行當前行變色的實現(xiàn)代碼,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-07-07Electron+vue從零開始打造一個本地播放器的方法示例
這篇文章主要介紹了Electron+vue從零開始打造一個本地播放器的方法示例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-10-10vue把頁面轉(zhuǎn)換成圖片導出方式(html2canvas導出不全問題)
這篇文章主要介紹了vue把頁面轉(zhuǎn)換成圖片導出方式(html2canvas導出不全問題),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10Pure admin-Router標簽頁配置與頁面持久化實現(xiàn)方法詳解
這篇文章主要介紹了Pure admin-Router標簽頁配置與頁面持久化實現(xiàn)方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習吧2023-01-01Vue中的路由跳轉(zhuǎn)(返回、刷新、跳轉(zhuǎn))
這篇文章主要介紹了Vue中的路由跳轉(zhuǎn)(返回、刷新、跳轉(zhuǎn))方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12