• 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>
    
    作者:明月人倚楼
    出处:https://www.cnblogs.com/IwishIcould/

    想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!

    如果觉得这篇文章对你有小小的帮助的话,记得在右下角点个“推荐”哦,或者关注博主,在此感谢!

    万水千山总是情,打赏5毛买辣条行不行,所以如果你心情还比较高兴,也是可以扫码打赏博主(っ•̀ω•́)っ✎⁾⁾!

    想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!

    支付宝
    微信
    本文版权归作者所有,欢迎转载,未经作者同意须保留此段声明,在文章页面明显位置给出原文连接
    如果文中有什么错误,欢迎指出。以免更多的人被误导。
  • 相关阅读:
    多轨车皮编序问题
    [Luogu1032] 字串变换
    [POJ1101] The Game
    Linux 下源码编译FFMEG
    交叉编译 tcpdump
    现代电视原理-电视传像原理
    Dos:‘锘緻echo’ 不是内部或外部命令,也不是可运行的程序或批处理文件
    Win7 登入壁纸修改
    Office 2016安装后的优化设置
    Linux 系统目录结构
  • 原文地址:https://www.cnblogs.com/IwishIcould/p/15395095.html
Copyright © 2020-2023  润新知