正则匹配el-input只能输入数字 保留两位小数
时间: 2024-09-12 19:07:42 浏览: 79
正则表达式是一种文本模式,包括普通字符(例如,a 到 z 之间的字母)和特殊字符(称为"元字符")。正则表达式通常用于检索、替换那些符合某个模式(规则)的文本。在Vue.js的`el-input`组件中,可以通过设置`v-model`进行双向数据绑定,并结合`键盘事件`(如`keypress`)或者`输入事件`(如`input`)以及正则表达式来限制用户输入的格式,使得`el-input`只能输入数字并且保留两位小数。
以下是一个示例代码,展示了如何使用正则表达式来限制`el-input`只能输入数字并且保留两位小数:
```html
<template>
<el-input v-model="inputValue" @input="handleInput"></el-input>
</template>
<script>
export default {
data() {
return {
inputValue: ''
}
},
methods: {
handleInput(value) {
// 正则表达式匹配数字且保留两位小数
const reg = /^\d*(\.\d{0,2})?$/;
// 如果输入不匹配,则清空输入框
if (!reg.test(value)) {
this.inputValue = this.inputValue.slice(0, -1); // 移除最后一个非法输入的字符
}
}
}
}
</script>
```
在这个例子中,`handleInput`方法会在每次用户输入时被调用。通过正则表达式`/^\d*(\.\d{0,2})?$/`,我们允许输入的值从0个或多个数字开始,然后是可选的点(`.`),后面跟着最多2个小数位。如果不满足这个条件,就会清除掉不符合规则的最后一个字符。
阅读全文