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

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

    支付宝
    微信
    本文版权归作者所有,欢迎转载,未经作者同意须保留此段声明,在文章页面明显位置给出原文连接
    如果文中有什么错误,欢迎指出。以免更多的人被误导。
  • 相关阅读:
    MySQL事务
    docker搭建mysql:5.7.29
    Docker构建常用PHP扩展
    Hadoop HDFS概述
    一个简单连接池的实现
    SpringCloud学习笔记-Eureka搭建过程中的出现问题
    记录Spring整合Mybatis过程中出现Invalid bound statement (not found)的解决问题思路
    项目中错误设置max-http-header-size参数导致内存激增
    DBeaver中如何调整SQL编辑器的字体大小
    Java 排序异常 Comparison method violates its general contract
  • 原文地址:https://www.cnblogs.com/IwishIcould/p/15395095.html
Copyright © 2011-2022 走看看