表单校验el-input只能输入数字,包含两位小数
时间: 2023-10-14 22:23:50 浏览: 101
jQuery控制input只能输入数字和两位小数的方法
可以通过正则表达式实现输入数字且包含两位小数的校验,例如:
```javascript
<template>
<div>
<el-input v-model="inputValue" placeholder="请输入数字(最多两位小数)" @input="handleInput"></el-input>
</div>
</template>
<script>
export default {
data() {
return {
inputValue: ''
};
},
methods: {
handleInput() {
const regex = /^[0-9]+(\.[0-9]{1,2})?$/; // 匹配数字和小数点,小数点后面最多两位
if (!regex.test(this.inputValue)) {
this.inputValue = this.inputValue.slice(0, -1); // 删除非法字符
}
}
}
};
</script>
```
在 `handleInput` 方法中,我们用正则表达式判断输入是否符合要求,如果不符合,则删除最后一个字符。这样可以保证用户输入的都是数字和小数点。同时,我们可以利用 `v-model` 双向绑定,将用户输入的内容展示在页面上。
阅读全文