vue2 element 正则验证输入框只能输入数字,且最多支持两位小数
时间: 2023-10-14 21:22:30 浏览: 64
vue.js实现只能输入数字的输入框
5星 · 资源好评率100%
您可以在Element-ui的Input组件中使用`el-input`的`v-model`指令来绑定输入框的值,然后通过正则表达式来限制输入。下面是一个示例代码:
```
<template>
<el-input v-model="inputValue" placeholder="请输入数字" @input="handleInput"></el-input>
</template>
<script>
export default {
data() {
return {
inputValue: ''
}
},
methods: {
handleInput() {
// 只允许输入数字和小数点,且小数点后最多两位
this.inputValue = this.inputValue.replace(/[^\d.]/g, '').replace(/^\./g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
}
}
}
</script>
```
在上述代码中,我们使用了`handleInput`方法来限制输入框的输入。该方法使用了一个正则表达式来替换输入框的值,只允许数字和小数点,并且小数点后最多两位。同时,我们把输入框的值绑定到了`inputValue`上,这样就可以在其他地方使用该值了。
阅读全文