vue前端el-input输入限制输入位数及输入规则
作者:穆宁!
这篇文章主要给大家介绍了关于vue前端el-input输入限制输入位数及输入规则的相关资料,文中通过代码介绍的介绍的非常详细,对大家学习或者使用vue具有一定的参考借鉴价值,需要的朋友可以参考下
前言
前端兼容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 } },
总结
到此这篇关于vue前端el-input输入限制输入位数及输入规则的文章就介绍到这了,更多相关vue前端el-input输入限制内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!