element ui el-input 输入框只能输入1-99范围内的并且可以输入两位小数点的正数,用正则校验
时间: 2024-11-15 14:28:16 浏览: 5
vue element-ui实现input输入框金额数字添加千分位
在Element UI的`el-input`中,你可以通过设置自定义验证规则来进行正则表达式校验,确保输入的数字在1-99范围内并包含两位小数。下面是一个示例,如何使用正则表达式:
首先,在Vue组件中引入`element-ui`并设置自定义验证规则:
```html
<template>
<el-form :model="form">
<el-form-item label="数值范围" prop="value">
<el-input v-model.number="form.value" :rules="{ required: true, validator: validateRangeAndDecimal }"></el-input>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: { value: null },
};
},
methods: {
validateRangeAndDecimal(rule, value, callback) {
const regExp = /^([1-9][0-9]?(\.[0-9]{2})?)$/;
if (!regExp.test(value)) {
callback(new Error('请输入1-99范围内的两位小数正数'));
} else {
callback();
}
},
},
};
</script>
```
在这个例子中,我们创建了一个名为`validateRangeAndDecimal`的校验函数,它接收三个参数:规则、用户输入值和回调函数。正则表达式`/^([1-9][0-9]?(\.[0-9]{2})?)$/`用于匹配符合条件的输入:
- `^` 表示字符串开始,
- `[1-9]` 匹配一位非零数字,
- `[0-9]?` 匹配一位可选数字(包括零,因为前面已经有非零条件),
- `(\.[0-9]{2})?` 匹配一个小数点后面最多两位的数字(可选),
- `$` 表示字符串结束。
如果输入不符合这个正则,就会触发错误提示。请注意,`v-model.number`确保了用户只能输入数字。
阅读全文