vue element-ui實(shí)現(xiàn)input輸入框金額數(shù)字添加千分位
在util.js中定義方法
包含金額添加過(guò)濾千分位,驗(yàn)證金額格式等
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() }) } // 驗(yàn)證金額數(shù)字可以為負(fù)數(shù) const moneyValid = function (rule,val,cb) { valdateFn(/((^-?[1-9]\d*)|^-?0)(\.\d{0,2}){0,1}$/,val,cb); }; // 驗(yàn)證金額數(shù)字不可以為負(fù)數(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實(shí)現(xiàn)input輸入框金額數(shù)字添加千分位,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺(jué)得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
相關(guān)文章
vite+vue3項(xiàng)目初始化搭建的實(shí)現(xiàn)步驟
本文主要介紹了vite+vue3項(xiàng)目初始化搭建的實(shí)現(xiàn)步驟,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-07-07vue項(xiàng)目實(shí)現(xiàn)表單登錄頁(yè)保存賬號(hào)和密碼到cookie功能
這篇文章主要介紹了vue項(xiàng)目實(shí)現(xiàn)表單登錄頁(yè)保存賬號(hào)和密碼到cookie功能,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-08-08vue2+element?ui?中的el-table?選中當(dāng)前行當(dāng)前行變色的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue2+element?ui?中的el-table?選中當(dāng)前行當(dāng)前行變色的實(shí)現(xiàn)代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-07-07vue實(shí)現(xiàn)廣告欄上下滾動(dòng)效果
這篇文章主要介紹了vue實(shí)現(xiàn)廣告欄上下滾動(dòng)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-11-11Electron+vue從零開始打造一個(gè)本地播放器的方法示例
這篇文章主要介紹了Electron+vue從零開始打造一個(gè)本地播放器的方法示例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10vue把頁(yè)面轉(zhuǎn)換成圖片導(dǎo)出方式(html2canvas導(dǎo)出不全問(wèn)題)
這篇文章主要介紹了vue把頁(yè)面轉(zhuǎn)換成圖片導(dǎo)出方式(html2canvas導(dǎo)出不全問(wèn)題),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10Pure admin-Router標(biāo)簽頁(yè)配置與頁(yè)面持久化實(shí)現(xiàn)方法詳解
這篇文章主要介紹了Pure admin-Router標(biāo)簽頁(yè)配置與頁(yè)面持久化實(shí)現(xiàn)方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2023-01-01Vue中的路由跳轉(zhuǎn)(返回、刷新、跳轉(zhuǎn))
這篇文章主要介紹了Vue中的路由跳轉(zhuǎn)(返回、刷新、跳轉(zhuǎn))方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12