对input输入框的正则限制

一、0-100的整数

正则： 

const inputRules = ref([
    {
        required: false,
        trigger: "blur",
        validator: (rule, value, callback) => {
            const reg = /^[0-9]+$/; // 只允许整数
            if (
                (0 <= value && value <= 100 && reg.test(value)) ||
                value == "" ||
                value == undefined
            ) {
                callback();
            } else {
                callback(new Error("请输入0-100之间的整数"));
            }
        },
    },
]);

html： 

 <el-form-item label="值" >
                    <div>
                        <el-button :disabled="queryParams.valveRateMin <= 0" @click="
                            queryParams.valveRateMin =
                            Number(queryParams.valveRateMin) - 1
                            " style="width: 32px">
                            <el-icon>
                                <Minus />
                            </el-icon>
                        </el-button>
                    </div>
                    <div style="width: 60%; margin: 0 4px">
                        <el-form-item label="" label-width="0" prop="valveRateMin" :rules="inputRules">
                            <el-input v-model="queryParams.valveRateMin" placeholder="请输入"></el-input>
                        </el-form-item>
                    </div>
                    <div>
                        <el-button :disabled="queryParams.valveRateMin >= 100" @click="
                            queryParams.valveRateMin =
                            Number(queryParams.valveRateMin) + 1
                            " style="width: 32px">
                            <el-icon>
                                <Plus />
                            </el-icon>
                        </el-button>
                    </div>
                </el-form-item>

如图： 

二、-10至10的整数

const inputRules = ref([
    {
        required: false,
        trigger: "blur",
        validator: (rule, value, callback) => {
          const reg = /^-?\d+$/; // 允许负数和正整数
            if (
                (-10 <= value && value <= 10 && reg.test(value)) ||
                value == "" ||
                value == undefined
            ) {
                callback();
            } else {
                callback(new Error("请输入-10-10之间的整数"));
            }
        },
    },
]);

 三、0-100允许一位小数

const inputRules = ref([
    {
        required: false,
        trigger: "blur",
        validator: (rule, value, callback) => {
            const reg = /^[-]?[0-9]+(\.[0-9]{1,1})?$/;
            if (
                (0 <= value && value <= 100 && reg.test(value)) ||
                value == "" ||
                value == undefined
            ) {
                callback();
            } else {
                callback(new Error("请输入0-100之间且最多保留一位小数的数"));
            }
        },
    },
]);

如果保留两位小数

   const reg = /^[-]?[0-9]+(\.[0-9]{1,2})?$/;

以此类推。。。

三位：   const reg = /^[-]?[0-9]+(\.[0-9]{1,3})?$/;