vue前端el-input输入限制输入位数以及输入规则-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue前端el-input输入限制输入位数以及输入规则。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前端兼容el-input输入时，仅允许输入负号、数字以及小数点，且限制整数位数以及小数位数，且不允许输入除第一个负号以外的其他符号

逻辑梳理

1、使用element-ui插件的el-input组件作为页面元素，为其绑定input事件（我这里是在表格里使用slot插入的inpu元素，所以传入参数使用scope传入）
2、绑定输入事件，传参给工具函数，等待返回值返回
3、传入参数从左到右依次为：
输入框正在输入的值e
整数部分最大输入位数限制intMax（number类型）：控制最大输入几位，超过此值不可继续输入
小数部分最大输入位数限制dotMax（number类型）：同上
输入框绑定的对象row：用于对象绑定
绑定对象上绑定此输入框的键值name：用于数据更新

说明：工具函数内部 return ‘0’ 的内容可以根据需求return不同数据，这里return
0便于判断后续操作是否执行，如果输入不合法字符，直接干掉不合法字符，不需要执行后面逻辑了

代码

html：

<el-input
   autofocus
   v-if="scope.row.isActive == true"
   type="text"
   class="column-remark-input"
   v-model.trim="scope.row.adjustAmount"
   placeholder="调整金额（若有）"
   @blur="numberBlur(scope)"
   @input="inputFocus($event, scope.row, scope)"
></el-input>

工具函数：文章来源地址https://www.toymoban.com/news/detail-696169.html

/* 输入时 */
		inputFocus(e, row, scope) {
            var num = this.inputLimit(e, 12, 2, row, 'adjustAmount')
            console.log("🚀 >> inputFocus >> num:", num)
		},
/* 
            限制输入框只可以输入数字以及负号
            且整数位最大可输入intMax位
            小数位最大可输入dotMax位
            name：  绑定对象键值
            intMax：整数最大位数
            dotMax：小数最大位数
        */
        inputLimit(num, intMax, dotMax, row, name) {
            // 类型过滤
            if(num === undefined || num === null) {
                return '0'
            }
            var next = num + ''
            /* 如果有单位 */
            /* 单位只允许是-，且在第一位 */
            /* 第一位不是-号 则过滤掉所有多余符号*/
            var hasCompany = ( next.indexOf('-') === 0 ) ? true : false
            var res = next.match(/-/g)
            if(hasCompany && res && res.length === 1) {
                /* 负号在第一位，且只有一个负号,正常流程*/
                /* 拿走第一个负号以后需，不允许有其他任何负号 */
                next = next.substring(1)
                /* 如果有小数 */
                if(next.indexOf('.') !== -1) {
                    var temp = next.split('.')
                    /* 保证 整数部分、小数部分 全部没有怪异符号在中间 */
                    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{
                    /* 如果没有小数 */
                    next = next.replace(/[^0-9]/g, "")
                    this.$set(row, name, next)
                }
            }else{
                /* 负号不在第一位，或者有其他怪异符号 */
                if(next.indexOf('.') !== -1) {
                    /* 如果有小数 */
                    var temp = next.split('.')
                    /* 保证 整数部分、小数部分 全部没有怪异符号在中间 */
                    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{
                    /* 如果没有小数 */
                    var final = next.replace(/[^0-9]/g, "")
                    this.$set(row, name, final)
                    return '0' // 这里可以根据需求return不同数据，这里return 0便于判断后续操作是否执行，如果输入不合法字符，直接干掉不合法字符，不需要执行后面逻辑了
                }
            }
            if(next !== '0' && Number(next)) {
                var resNum = ''
                /* 如果有小数 */
                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{
                    /* 如果没小数 一串数字，只需要限制位数*/
                    resNum = num.length > intMax ? num.substring(0, intMax) : num
                    this.$set(row, name, resNum)
                }
                return resNum
            }
        },