uniapp input 既能输入数字又能输入小数点 小数点后保留三位小数 且第一位不能为0
时间: 2024-03-20 17:41:34 浏览: 244
可以通过设置 input 组件的 type 为 number,然后使用正则表达式限制输入格式。具体代码如下:
```
<template>
<input v-model="value" type="number" step="0.001" @input="limitInput"/>
</template>
<script>
export default {
data() {
return {
value: ''
}
},
methods: {
// 限制输入格式为数字和小数点,小数点后最多三位,且第一位不能为0
limitInput() {
this.value = this.value.replace(/[^0-9.]/g, ''); // 只允许输入数字和小数点
this.value = this.value.replace(/^\./g, ''); // 第一位不能为小数点
this.value = this.value.replace(/\.{2,}/g, '.'); // 只保留一个小数点
this.value = this.value.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.'); // 小数点后最多三位
this.value = this.value.replace(/^0{2,}/g, '0'); // 前面多余的0去掉
this.value = this.value.replace(/^0(\d+)/g, '$1'); // 第一位不能为0
}
}
}
</script>
```
在该代码中,我们使用了正则表达式来限制输入的格式,保证了输入的只能是数字和小数点,并且注意了小数点的位置和位数限制,同时还限制了第一位不能为0。
阅读全文