前端兼容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組件作為頁面元素，為其綁定input事件（我這里是在表格里使用slot插入的inpu元素，所以傳入?yún)?shù)使用scope傳入）
2、綁定輸入事件，傳參給工具函數(shù)，等待返回值返回
3、傳入?yún)?shù)從左到右依次為：
輸入框正在輸入的值e
整數(shù)部分最大輸入位數(shù)限制intMax（number類型）：控制最大輸入幾位，超過此值不可繼續(xù)輸入
小數(shù)部分最大輸入位數(shù)限制dotMax（number類型）：同上
輸入框綁定的對(duì)象row：用于對(duì)象綁定
綁定對(duì)象上綁定此輸入框的鍵值name：用于數(shù)據(jù)更新

說明：工具函數(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ù)：文章來源地址http://www.zghlxwxcb.cn/news/detail-696169.html

/* 輸入時(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) {
            // 類型過濾
            if(num === undefined || num === null) {
                return '0'
            }
            var next = num + ''
            /* 如果有單位 */
            /* 單位只允許是-，且在第一位 */
            /* 第一位不是-號(hào) 則過濾掉所有多余符號(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ù)部分 全部沒有怪異符號(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{
                    /* 如果沒有小數(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ù)部分 全部沒有怪異符號(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{
                    /* 如果沒有小數(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{
                    /* 如果沒小數(shù) 一串?dāng)?shù)字，只需要限制位數(shù)*/
                    resNum = num.length > intMax ? num.substring(0, intMax) : num
                    this.$set(row, name, resNum)
                }
                return resNum
            }
        },

到了這里，關(guān)于vue前端el-input輸入 限制輸入位數(shù)以及輸入規(guī)則的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！