ant-design-vue仅支持输入0-100之间的整数校验规则

ant-design-vue仅支持输入0-100之间的整数

其实有两种方法,首先是简单的a-input-number:

<a-input-number  :min="0"  v-model="addForm.add_actual_finish" :max="100"  :precision="0"/>

但是我是在a-form-modal中使用,并且有必须显示提示的需求,所以使用了a-form-modal:
页面中代码:

<a-form-model-item label="实际完成度:" prop="add_actual_finish">
   <a-input v-model="addForm.add_actual_finish" placeholder="请输入实际完成度" :disabled="modalDisabled"/>
</a-form-model-item>

data模型数据中规则:

add_actual_finish: [
                    { required: true, message: '实际完成度不能为空', trigger: 'blur' },
                    { type: 'number', message: '仅支持输入0-100之间的整数', trigger: 'blur',transform(value){ 
                        if(value){
                            // 将输入的值转为数字
                            var val = Number(value)
                            // 正则表达式校验输入的数字是否在0-100之内并且属于整数
                            if(/^(?:[1-9]?\d|100)$/.test(val)) return val
                            // 返回false即为校验失败
                            return false
                        }
                    }},
                ],

校验规则内函数说明

猜你喜欢

转载自blog.csdn.net/weixin_43242112/article/details/106720020