今天遇见这样一个问题,InputNumber 输入框中有值
但是却却提示验证不能够通过
后来经过分析,怀疑是数据类型不正确,
后面经过验证,果然是数据类型不正确
正确做法
<template>
<div>
<a-form
ref="formRef"
:model="formState"
:rules="rules"
:label-col="labelCol"
:wrapper-col="wrapperCol"
>
<a-form-item ref="name" label="金额" name="money">
<a-input-number id="inputNumber" v-model:value="formState.money" :min="1" :precision="2" :max="10000" />
</a-form-item>
<a-form-item>
<a-button type="primary" @click="onSubmit">Create</a-button>
<a-button style="margin-left: 10px" @click="resetForm">Reset</a-button>
</a-form-item>
</a-form>
</div>
</template>
<script>
import { reactive } from '@vue/reactivity'
export default {
setup () {
const rules = {
money: [
//这里一定要添加上数据类型是字符串类型的。
//否者验证不会通过
{ required: true, message: '请输入', trigger: 'blur' ,type:String},
]
}
let formState=reactive({
money:''
})
function onSubmit(){
console.log(formState);
}
function resetForm(){
console.log(formState);
}
return {
rules,
formState,
onSubmit,
resetForm
}
}
}
</script>