Ant Design Vue数字输入框InputNumber 有值但是验证却不能够通过

InputNumber 有值但是验证却不能够通过

今天遇见这样一个问题，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>

标签：function,formState,Vue,验证,InputNumber,数据类型,Ant,money
来源： https://www.cnblogs.com/IwishIcould/p/15395095.html