第四十节 Vue3+ElementPlus实现input组件的数值大小校验

亮子 2025-05-14 08:35:02 360 0 0 0

1、模版代码

                   <el-form-item
                        label="使用面积"
                        prop="typeArea"
                        :label-width="formLabelWidth"
                    >
                        <el-input v-model.number="form.typeArea" />
                    </el-form-item>

2、ts代码

const rules = reactive<FormRules<RuleForm>>({
    typeArea: [
        { required: true, message: "请输入房间面积", trigger: "blur" },
        { type: 'number', min: 20, message: "房间最小面积是20", trigger: 'blur' },
    ],
});

3、说明

默认情况下,size是对input组件的字符长度进行限制,要想限制值的大小,必须添加 type: 'number'v-model.number 才行。

76e60315ec0aada353d2bf716a9bec53.png