遇到一个表单中有很多个输入正数的输入框,想到使用正则表达式的方式来解决,但搜索到的基本都是针对于单个输入框的,所以整合了一下。
首先,是正则表达式的函数:
inputHandleEdit(e,name) {
let value = e.replace(/[^\d.]/g, '') // 只能输入数字和.
value = value.replace(/^\./g, '') //第一个字符不能是.
value = value.replace(/\.{2,}/g, '.') // 不能连续输入.
value = value.replace(/(\.\d+)\./g, '$1') // .后面不能再输入.
value = value.replace(/^0+(\d)/, '$1') // 第一位0开头,0后面为数字,则过滤掉,取后面的数字
value = value.replace(/(\d{15})\d*/, '$1') // 最多保留15位整数
value = value.replace(/(\.\d{2})\d*/, '$1')// 最多保留2位小数
this.dataForm[name] = value
},
来源于el-input 只能输入整数(包括正数、负数、0)或者只能输入整数(包括正数、负数、0)和小数
之后是我的调用举例
<el-col :span="8">
<el-form-item label="总价部分" prop="signWholeMoney">
<el-input v-model="dataForm.signWholeMoney" auto-complete="off" @input="inputHandleEdit($event,'signWholeMoney')">
<template slot="append">元</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="清单部分" prop="signDetailMoney">
<el-input v-model="dataForm.signDetailMoney" auto-complete="off" @input="inputHandleEdit($event,'signDetailMoney')">
<template slot="append">元</template>
</el-input>
</el-form-item>
</el-col>
其中$event是调用方法是获取该输入框的内容,单引号的内容是该输入框的数据名,在函数中使用this.dataForm[name] = value,把正则表达式处理后的值付给输入框