el-input限制只能输入0-999的正整数
174浏览 · 2023-08-18 10:13:37
要限制输入框只能输入0-999的正整数，你可以结合使用 Element UI 的输入框组件和自定义的[验证](https://geek.csdn.net/educolumn/0330ae9ce73d0920177833b396480304?spm=1055.2569.3001.10083)[规则](https://geek.csdn.net/educolumn/35d569c666d5ed591a11482795ce7418?spm=1055.2569.3001.10083)。下面是一个示例[代码](https://geek.csdn.net/educolumn/1572ef9b473b4e00f6b2bf6d428b7c27?spm=1055.2569.3001.10083)：
```vue
<template>
<el-input v-model="inputValue" :rules="rules" placeholder="请输入0-999的正整数"></el-input>
</template>
<script>
export default {
data() {
return {
inputValue: '',
rules: [
validator: (rule, value, [call](https://geek.csdn.net/educolumn/3cda1aeab044ec99e05646be0d6f9d8e?spm=1055.2569.3001.10083)back) => {
const num = parseInt(value);
if (Number.isInteger(num) && num >= 0 && num <= 999) {
callback();
} else {
callback(new Error('请输入0-999的正整数'));
trigger: 'blur'
</script>
在上述[代码](https://geek.csdn.net/educolumn/1572ef9b473b4e00f6b2bf6d428b7c27?spm=1055.2569.3001.10083)中，我们使用了 Element UI 的输入框组件 `el-input`，并绑定了 `inputValue` 属性