form表单的自定义校验规则

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

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

不通过校验提示：

 

 

 

通过校验：