vue前端el-input輸入限制輸入位數(shù)及輸入規(guī)則
前言
前端兼容el-input輸入時(shí),僅允許輸入負(fù)號(hào)、數(shù)字以及小數(shù)點(diǎn),且限制整數(shù)位數(shù)以及小數(shù)位數(shù),且不允許輸入除第一個(gè)負(fù)號(hào)以外的其他符號(hào)
邏輯梳理
1、使用element-ui插件的el-input組件作為頁(yè)面元素,為其綁定input事件(我這里是在表格里使用slot插入的inpu元素,所以傳入?yún)?shù)使用scope傳入)
2、綁定輸入事件,傳參給工具函數(shù),等待返回值返回
3、傳入?yún)?shù)從左到右依次為:
輸入框正在輸入的值e整數(shù)部分最大輸入位數(shù)限制intMax(number類(lèi)型):控制最大輸入幾位,超過(guò)此值不可繼續(xù)輸入
小數(shù)部分最大輸入位數(shù)限制dotMax(number類(lèi)型):同上
輸入框綁定的對(duì)象row:用于對(duì)象綁定
綁定對(duì)象上綁定此輸入框的鍵值name:用于數(shù)據(jù)更新
說(shuō)明:工具函數(shù)內(nèi)部 return ‘0’ 的內(nèi)容可以根據(jù)需求return不同數(shù)據(jù),這里return
0便于判斷后續(xù)操作是否執(zhí)行,如果輸入不合法字符,直接干掉不合法字符,不需要執(zhí)行后面邏輯了
代碼
html:
<el-input autofocus v-if="scope.row.isActive == true" type="text" class="column-remark-input" v-model.trim="scope.row.adjustAmount" placeholder="調(diào)整金額(若有)" @blur="numberBlur(scope)" @input="inputFocus($event, scope.row, scope)" ></el-input>
工具函數(shù):
/* 輸入時(shí) */
inputFocus(e, row, scope) {
var num = this.inputLimit(e, 12, 2, row, 'adjustAmount')
console.log("?? >> inputFocus >> num:", num)
},
/*
限制輸入框只可以輸入數(shù)字以及負(fù)號(hào)
且整數(shù)位最大可輸入intMax位
小數(shù)位最大可輸入dotMax位
name: 綁定對(duì)象鍵值
intMax:整數(shù)最大位數(shù)
dotMax:小數(shù)最大位數(shù)
*/
inputLimit(num, intMax, dotMax, row, name) {
// 類(lèi)型過(guò)濾
if(num === undefined || num === null) {
return '0'
}
var next = num + ''
/* 如果有單位 */
/* 單位只允許是-,且在第一位 */
/* 第一位不是-號(hào) 則過(guò)濾掉所有多余符號(hào)*/
var hasCompany = ( next.indexOf('-') === 0 ) ? true : false
var res = next.match(/-/g)
if(hasCompany && res && res.length === 1) {
/* 負(fù)號(hào)在第一位,且只有一個(gè)負(fù)號(hào),正常流程*/
/* 拿走第一個(gè)負(fù)號(hào)以后需,不允許有其他任何負(fù)號(hào) */
next = next.substring(1)
/* 如果有小數(shù) */
if(next.indexOf('.') !== -1) {
var temp = next.split('.')
/* 保證 整數(shù)部分、小數(shù)部分 全部沒(méi)有怪異符號(hào)在中間 */
var intNum = temp[0].replace(/[^0-9]/g, "")
var dotNum = temp[1].replace(/[^0-9]/g, "")
next = intNum + '.' + dotNum
this.$set(row, name, next)
}else{
/* 如果沒(méi)有小數(shù) */
next = next.replace(/[^0-9]/g, "")
this.$set(row, name, next)
}
}else{
/* 負(fù)號(hào)不在第一位,或者有其他怪異符號(hào) */
if(next.indexOf('.') !== -1) {
/* 如果有小數(shù) */
var temp = next.split('.')
/* 保證 整數(shù)部分、小數(shù)部分 全部沒(méi)有怪異符號(hào)在中間 */
var intNum = temp[0].replace(/[^0-9]/g, "")
var dotNum = temp[1].replace(/[^0-9]/g, "")
var final = (hasCompany ? '-' : '' ) + intNum + '.' + dotNum
this.$set(row, name, final)
return '0'
}else{
/* 如果沒(méi)有小數(shù) */
var final = next.replace(/[^0-9]/g, "")
this.$set(row, name, final)
return '0' // 這里可以根據(jù)需求return不同數(shù)據(jù),這里return 0便于判斷后續(xù)操作是否執(zhí)行,如果輸入不合法字符,直接干掉不合法字符,不需要執(zhí)行后面邏輯了
}
}
if(next !== '0' && Number(next)) {
var resNum = ''
/* 如果有小數(shù) */
if(next.indexOf('.') !== -1) {
var arr = next.split('.')
arr[0] = arr[0].length > intMax ? arr[0].substring(0, intMax) : arr[0]
if(arr[1] !== '') {
arr[1] = arr[1].length > dotMax ? arr[1].substring(0, dotMax) : arr[1]
var result = arr.join('.')
resNum = Number(hasCompany ? ('-' + result) : result).toFixed(arr[1].length)
}else{
var result = arr.join('.')
resNum = hasCompany ? ('-' + result) : result
}
this.$set(row, name, resNum)
return resNum
}else{
/* 如果沒(méi)小數(shù) 一串?dāng)?shù)字,只需要限制位數(shù)*/
resNum = num.length > intMax ? num.substring(0, intMax) : num
this.$set(row, name, resNum)
}
return resNum
}
},總結(jié)
到此這篇關(guān)于vue前端el-input輸入限制輸入位數(shù)及輸入規(guī)則的文章就介紹到這了,更多相關(guān)vue前端el-input輸入限制內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue關(guān)于eslint空格縮進(jìn)等的報(bào)錯(cuò)問(wèn)題及解決
這篇文章主要介紹了vue關(guān)于eslint空格縮進(jìn)等的報(bào)錯(cuò)問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-05-05
vant picker+popup 自定義三級(jí)聯(lián)動(dòng)案例
這篇文章主要介紹了vant picker+popup 自定義三級(jí)聯(lián)動(dòng)案例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
Vue中在新窗口打開(kāi)頁(yè)面及Vue-router的使用
這篇文章主要介紹了Vue中在新窗口打開(kāi)頁(yè)面 及 Vue-router的使用,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-06-06
vue+el使用this.$confirm,不能阻斷代碼往下執(zhí)行的解決
這篇文章主要介紹了vue+el使用this.$confirm,不能阻斷代碼往下執(zhí)行的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09
vue3.0中給自己添加一個(gè)vue.config.js配置文件
這篇文章主要介紹了vue3.0中給自己添加一個(gè)vue.config.js配置文件方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
Vue2 SSR渲染根據(jù)不同頁(yè)面修改 meta
本篇文章主要介紹了Vue2 SSR渲染根據(jù)不同頁(yè)面修改 meta,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
vue封裝Animate.css動(dòng)畫(huà)庫(kù)的使用方式
這篇文章主要介紹了vue封裝Animate.css動(dòng)畫(huà)庫(kù)的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
Vue Element-ui實(shí)現(xiàn)樹(shù)形控件節(jié)點(diǎn)添加圖標(biāo)詳解
這篇文章主要為大家介紹了Element-ui實(shí)現(xiàn)樹(shù)形控件節(jié)點(diǎn)添加圖標(biāo),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助2021-11-11

