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
}
}},
],