form表单的自定义校验规则

最新推荐文章于 2024-07-25 09:24:40 发布

长相思979

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量667

点赞数 5

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/weixin_63896561/article/details/136378104

版权

本文介绍了如何在Vue项目中使用ElementUI的el-input组件实现0-100范围的数字输入校验，包括设置验证规则和错误提示。

摘要由CSDN通过智能技术生成

需求：校验el-input输入为0-100的数字

 <el-form :label-position="'top'" label-width="80px" ref="ogdiskForm" :model="originalDiskForm" :rules="rules" class="form">
    <el-form-item label="目标比例：(磁盘达到该比例后，将出现阈值提示)" v-if="originalDiskForm.type !== 'object'" prop="useAblePercent">
                        <!-- @input="numValid" -->
                        <el-input v-model="originalDiskForm.useAblePercent" style="width: 270px">
                            <template slot="append">%</template>
                        </el-input>
                    </el-form-item>
</el-form>


data(){
    var checkPct = (rule, value, callback) => {
            if (!Number(value)) {
                if(value == 0){
                    callback();
                }else{
                    callback(new Error('请输入数字'));
                }
            } else {
                if (value < 0) {
                    callback(new Error('目标比例不能小于0'));
                } else if(value > 100){
                    callback(new Error('目标比例不能大于100'));
                } else{
                    callback();
                }
            }
        }

return {
    // 原盘符数据表单
            originalDiskForm: {
                useAblePercent: '',
            },
            rules:{
                useAblePercent:[
                    {validator: checkPct, trigger: 'blur'}
                ],
            }

}

}

不通过校验提示：