vue +element组件el-input输入框数字限制问题提供参考_

vue学习之elementUI组件el-input输入框只能输入数字或保留两位小数

只能输入数字的两种方法：
方法一：使用type=“number”

<el-input v-model.number='count' type='number' maxlength='9'/>

1
2

缺点：
maxlength不生效
可以输入e
可以输入小数点
方法二：使用正则表达式

<el-input v-model.number='count' oninput="value=value.replace(/[^\d]/g,'')" maxlength='9'/>

1
2

其中v-model.number确保获得的count值为数字，即使0开头也会被后续数字代替。
输入数字或保留两位小数的表单校验

//不使用表单校验
//缺点：不能输入0.01
<el-input oninput="value=value.indexOf('.') > -1?value.slice(0, value.indexOf('.') + 3):value" type="number" v-model.number="num"></el-input>
//解决：把v-model的number去掉即可
<el-input oninput="value=value.indexOf('.') > -1?value.slice(0, value.indexOf('.') + 3):value" type="number" v-model="num"></el-input>
//原因：v-model.number会把0.0x后的数字转换为0，算是输入框的一个特性吧。

//使用表单校验
cost:[
 { required: true, trigger: 'change', message:'请输入金额'},
 { pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '请输入正确的格式,可保留两位小数' }
],

1
2
3
4
5
6
7
8
9
10
11
12
13

注意说的是::::vue中input校验只能输入正数、小数点保留两位或者多位

<el-input v-model="form.theoProportions[item].theoProportion"  @keyup.native="proving(form.theoProportions[item].theoProportion,item)" placeholder="请输入用量"></el-input>

proving (params, item) {
          this.form.theoProportions[item].theoProportion = params.match(/\d+(\.\d{0,2})?/) ? params.match(/\d+(\.\d{0,2})?/)[0] : '';

    }
1
2
3
4
5
6