The element-ui form wants to validate a range of numbers, how does type= "number" work with min and max and optional validation

when using the ELement-ui form, you want to verify the number type. If you write type= "number" in the verification rule, it will have no effect. online running address

try to add a number modifier on < el-input vmurmodel.number = "ruleForm.age" > < / el-input >, invalid

the related code is as follows

<template>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
        <el-form-item label="" prop="age">
            <el-input v-model.number="ruleForm.age"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm("ruleForm")"></el-button>
            <el-button @click="resetForm("ruleForm")"></el-button>
        </el-form-item>
    </el-form>
</template>
<script>
    export default {
        data () {
            return {
                ruleForm: {
                    age: ""
                },
                rules: {
                    age: [
                        { required: false, message: "", trigger: "blur" },
                        { type: "number", message: "", trigger: "blur" },
                        { min: 1, max: 3, message: " 1  3 ", trigger: "blur" }
                    ]
                }
            };
        },
        methods: {
            submitForm (formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert("submit!");
                    } else {
                        console.log("error submit!!");
                        return false;
                    }
                });
            },
            resetForm (formName) {
                this.$refs[formName].resetFields();
            }
        }
    };
</script>

the result of the actual operation is: 1, when you do not enter anything, you will be prompted that "age must be a numeric value"; 2, after entering a number, you will be prompted "length is 1 to 3 characters", and the expected result is: 1, when you do not enter anything, no verification will be done; 2, enter 1-3 direct numbers, and the verification will pass;

related demo online running address

Jul.21,2021

try to change the rule

 { pattern:/^\d{1,3}$/, message: ' 1  3 ', trigger: 'blur' }

 rules: {
          averageCaseRunTime: [{
            type: 'number',
            trigger: 'blur',
            required: false,
            message: '',
            
            // :rules 
            transform (value) {
              return _.toNumber(value)
            }
          }]
        }
Menu