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

简介: 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>
相关文章
|
1天前
|
JavaScript 前端开发
【vue】iview如何把input输入框和点击输入框之后的边框去掉
【vue】iview如何把input输入框和点击输入框之后的边框去掉
6 0
|
1天前
|
JavaScript
【vue】 父组件调用子组件方法
【vue】 父组件调用子组件方法
6 0
|
1天前
|
JavaScript
【vue】 如何给封装好的组件加click事件
【vue】 如何给封装好的组件加click事件
6 1
|
1天前
|
JavaScript
【vue实战】父子组件互相传值
【vue实战】父子组件互相传值
5 1
|
1天前
|
存储 JavaScript 前端开发
【Vue】绝了!这生命周期流程真...
【Vue】绝了!这生命周期流程真...
|
2天前
|
JavaScript 索引
【vue】框架搭建
【vue】框架搭建
6 1
|
2天前
|
JavaScript 前端开发 容器
< 每日小技巧: 基于Vue状态的过渡动画 - Transition 和 TransitionGroup>
Vue 的 `Transition` 和 `TransitionGroup` 是用于状态变化过渡和动画的组件。`Transition` 适用于单一元素或组件的进入和离开动画,而 `TransitionGroup` 用于 v-for 列表元素的增删改动画,支持 CSS 过渡和 JS 钩子。
< 每日小技巧: 基于Vue状态的过渡动画 - Transition 和 TransitionGroup>
|
2天前
|
JavaScript
【vue】setInterval的嵌套实例
【vue】setInterval的嵌套实例
6 1
|
2天前
|
JavaScript 前端开发 安全
【Vue】内置指令真的很常用!
【Vue】内置指令真的很常用!
|
2天前
|
JavaScript
【Vue】过滤器Filters
【Vue】过滤器Filters