vue学习之elementUI组件el-input输入框只能输入数字或保留两位小数
方法一:使用type=“number”<el-input v-model.number='count' type='number' maxlength='9'/>缺点:maxlength不生效可以输入e可以输入小数点方法二:使用正则表达式<el-input v-model.number='count' oninput="value=value.replace(/[^\d]/g,'
·
只能输入数字的两种方法:
方法一:使用type=“number”
<el-input v-model.number='count' type='number' maxlength='9'/>
缺点:
- maxlength不生效
- 可以输入e
- 可以输入小数点
方法二:使用正则表达式
<el-input v-model.number='count' oninput="value=value.replace(/[^\d]/g,'')" maxlength='9'/>
其中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: '请输入正确的格式,可保留两位小数' }
],
更多推荐
已为社区贡献14条内容
所有评论(0)