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>

相关文章

过滤器:就是筛选filters: [ { text: '全部', v...
好处: 就是可以实现 响应式 拉伸行(row) 列(col)col要直接在...
创好vue 项目npm 下载antnpm i --save ant-design-vue@next完...
外面套个from 标签就好了。
antDesign表单函数配置分析用getFieldDecorator包起来的高阶...
之前在vue页面中引入axios使用,本篇在mainjs中引入1、mainj...