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

发布时间:2022-01-14 发布网站:https://www.cnblogs.com/IwishIcould
前端之家收集整理的这篇文章主要介绍了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>

总结


以上是前端之家为你收集整理的Ant Design Vue数字输入框InputNumber 有值但是验证却不能够通过全部内容,希望文章能够帮你解决Ant Design Vue数字输入框InputNumber 有值但是验证却不能够通过所遇到的程序开发问题。

如果觉得前端之家网站内容还不错,欢迎将前端之家网站推荐给前端开发程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。