zoukankan      html  css  js  c++  java
  • 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毛买辣条行不行,所以如果你心情还比较高兴,也是可以扫码打赏博主(っ•̀ω•́)っ✎⁾⁾!

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

    支付宝
    微信
    本文版权归作者所有,欢迎转载,未经作者同意须保留此段声明,在文章页面明显位置给出原文连接
    如果文中有什么错误,欢迎指出。以免更多的人被误导。
  • 相关阅读:
    电脑进入bios和u盘启动快捷键
    Securecrt 在win7下 字体太少问题
    windows无法安装到这个磁盘 gpt分区形式
    优酷上传高清视频
    将文件服务器及域控制器从2003迁移至Windows Server 2008 R2
    L SERVER 数据库被标记为“可疑”的解决办法
    Outlook关闭时最小化
    windows 7系统封装总结
    查询某软件所连接的外网IP地址
    windows桌面图标及任务管理栏丢失
  • 原文地址:https://www.cnblogs.com/IwishIcould/p/15395095.html
Copyright © 2011-2022 走看看