1. 场景
当 el-input 的 type 为 text 时，我们需要限制输入框只能输入数字和小数。
2. 解决方案
方法一：
1
2
3
4
5
6
7
8
9
| <el-input v-model="sjje" oninput ="value=value.replace(/[^0-9.]/g,'')" class="money sjje">
<span slot="suffix">/ 元 </span>
</el-input>
<!--
oninput = “value=value.replace(/[^\d]/g,‘’)” //只能输入数字
oninput = “value=value.replace(/[^0-9.]/g,‘’)” //只能输入数字和小数
-->
|
方法二
1
2
3
4
5
6
7
| <el-input v-model="sjje" class="money sjje" @input="inputChange">
<span slot="suffix">/ 元 </span>
</el-input>
inputChange(val) {
this.sjje = this.sjje.replace(/[^0-9.]/g, '')
}
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <el-form ref="userform" rules="rules" :model="form" label-width="110px">
<el-row>
<el-form-item label="年龄：" prop="age">
<el-input v-model="form.age"></el-input>
</el-form-item>
</el-row>
</el-form>
rules:{
age:[
{ required: true, message: '年龄不能为空', trigger: 'blur'},
{pattern: /^[0-9]*$/, message: '年龄需为数字', trigger: 'blur'}
]
},
|
1
2
3
4
5
| <el-input v-model="queryParams.uid"
placeholder="请输入UID"
clearable style="width: 240px"
@input="value => queryParams.uid = value.replace(/[^a-zA-Z0-9]/g, '')"
@keyup.enter="handleQuery" />
|
