最近在做一个项目，业务小姐姐要求我们前端一个输入框只能输入数字，本来是一个很简单的事，丢个el-input-number完事。然而，业务小姐姐觉得计数器两端的按钮太丑🤨，好吧，那就换成el-input，给他type=number,企图蒙混过关，结果被发现要求再改🤪，饶了我这个后端吧，为什么这么大个公司招不到一个前端😵，所以最后想到了用正则表达式将数据过滤一遍，所以如下
1
2
3
4
5
| <el-input type="text"
oninput="value=value.replace(/[^\d.]/g,'')"
v-model="form.payer"
label="Please enter Payer"
/>
|
type=“text”，然后oninput监听输入值，再通过正则表达式去掉所有非数字，这样就行了，不过还是能输入小数点，如果要求只能输入整数，则需要再改进，以后有空再想吧
奇奇怪怪的需求总是这么多😵，不过这里其实原理一样，都是利用正则表达式，具体如下：
1
2
3
4
5
| <el-input
oninput="value=value.replace(/[a-z]/g, (match) => match.toUpperCase())"
v-model="scope.row.repository"
placeholder="请输入仓库"
/>
|
只允许输入数字(整数：小数点不能输入)
1
| <input type="text" onkeyup="value=value.replace(/[^\d]/g,'')" >
|
允许输入小数(两位小数)
1
| <input type="text" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" >
|
允许输入小数(一位小数)
1
| <input type="text" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,1})?).*$/g, '$1')" >
|
开头不能为0，且不能输入小数
1
| <input type="text" onkeyup="value=value.replace(/[^\d]/g,'').replace(/^0{1,}/g,'')" >
|
不能输入中文和字母 例如：价格输入
1
| <input type="text" value="" οnkeyup="value=value.replace(/[\u4E00-\u9FA5]|[A-Za-z]/g,'')" >
|
1
2
| <el-input v-model="item.userScore" onkeyup="this.value=this.value.replace(/[^\d.]/g,'');"
maxlength="4"/>
|
实现输入框只能输入正整数，输入同时禁止了以0开始的数字输入，防止被转化为其他进制的数值。
1
| <input type='text' onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')">
|
现在我碰到一种比较奇怪的需求，就是有群神经病，希望一个搜索框将文本复制进去，能够实现多项条件搜索😵
这里我把空格转换成逗号，然后存到list中去处理
1
| <el-input v-model="testValue" type="text" @input="testValue = testValue.replace(/[\s\r\t]+/g, ',')"/>
|
