跨境派

跨境派

跨境派,专注跨境行业新闻资讯、跨境电商知识分享!

当前位置:首页 > 工具系统 > 其他工具 > vue前端el-input输入 限制输入位数以及输入规则

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

时间:2024-04-12 14:10:18 来源:网络cs 作者:璐璐 栏目:其他工具 阅读:

标签: 输入  规则  限制 

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>

工具函数:

/* 输入时 */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            }        },

本文链接:https://www.kjpai.cn/news/2024-04-12/157594.html,文章来源:网络cs,作者:璐璐,版权归作者所有,如需转载请注明来源和作者,否则将追究法律责任!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。

文章评论