element ui el-input 输入框只能输入1-99范围内的并且可以输入1位或者2小数点的正数,用正则校验
时间: 2024-11-15 18:28:59 浏览: 5
vue element-ui实现input输入框金额数字添加千分位
Element UI 的 `el-input` 组件结合正则表达式可以实现这样的验证功能。你可以使用 Vue.js 中的 `v-model` 指令配合自定义的 `input` 事件监听,以及 `pattern` 属性来进行这种特定格式的输入验证。
下面是一个简单的示例:
```html
<template>
<el-form-item label="数值范围">
<el-input v-model.number="inputValue" placeholder="请输入1-99范围内的数字(最多2位小数)">
<span slot="append">.</span>
</el-input>
</el-form-item>
</template>
<script>
export default {
data() {
return {
inputValue: '',
};
},
methods: {
handleInput(e) {
const pattern = /^\d+(\.\d{1,2})?$/; // 正则表达式匹配整数和最多两位的小数
if (!pattern.test(e.target.value)) { // 如果输入不符合正则
this.inputValue = e.target.value; // 清空输入并显示错误信息
}
},
},
watch: {
inputValue(newVal, oldVal) {
if (newVal !== oldVal && !/^(\d{1,2}|[1-9]\d?)\.{0,1}\d{0,2}$/.test(newVal)) {
this.inputValue = oldVal; // 如果输入改变且不符合规则,恢复旧值
}
},
},
directives: {
'number': {
bind(el, binding) {
el.addEventListener('input', this.handleInput);
},
unbind(el) {
el.removeEventListener('input', this.handleInput);
},
},
},
};
</script>
```
在这个例子中,我们使用了正则表达式 `^\d+(\.\d{1,2})?$` 来匹配1到99之间的整数和最多两位的小数。如果用户输入不符合这个模式,会自动清空输入值。
阅读全文