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>
posted @   南风晚来晚相识  阅读(2442)  评论(0编辑  收藏  举报
编辑推荐:
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行:
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
点击右上角即可分享
微信分享提示