Ant Design Vue数字输入框InputNumber 有值但是验证却不能够通过
时间:2021-10-11
本文章向大家介绍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>
作者:明月人倚楼
出处:https://www.cnblogs.com/IwishIcould/
本文版权归作者所有,欢迎转载,未经作者同意须保留此段声明,在文章页面明显位置给出原文连接
如果文中有什么错误,欢迎指出。以免更多的人被误导。
出处:https://www.cnblogs.com/IwishIcould/
想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!
如果觉得这篇文章对你有小小的帮助的话,记得在右下角点个“推荐”哦,或者关注博主,在此感谢!
万水千山总是情,打赏5毛买辣条行不行,所以如果你心情还比较高兴,也是可以扫码打赏博主(っ•̀ω•́)っ✎⁾⁾!
想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!
支付宝
微信
如果文中有什么错误,欢迎指出。以免更多的人被误导。
原文地址:https://www.cnblogs.com/IwishIcould/p/15395095.html
- 分布式服务注册和发现consul 简要介绍
- ZooKeeper 笔记(3) 实战应用之【统一配置管理】
- 3D游戏开发之在UE4中创建非玩家角色(NPC)
- VMware Fusion DHCP方式下如何指定虚拟机IP地址
- Visual Studio 2015正式发布
- 科技巨头纷纷入局 医疗人工智能需要奋起直追?
- Windows PowerShell 工具
- 游戏开发之在UE4中编写C++代码控制角色
- Visual Studio 64位应用程序编译
- Windows 7 上安装Visual Studio 2015 失败解决方案
- Silverlight调用本机exe程序
- 游戏开发之UE4添加角色到场景中
- 人工智能取代人类?高通副总裁这样说
- Disque:Redis之父新开源的分布式内存作业队列
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Linux VPS安装Google Authenticator实现SSH登陆二次验证
- Android小程序实现访问联系人
- Android小程序实现切换背景颜色
- 浅析Android加载字体包及封装的方法
- android实现滑动标签页效果的代码解析
- Android PC端用ADB抓取指定应用日志实现步骤
- Android studio 禁用AndroidX方式
- Android 实现把bitmap图片的某一部分的颜色改成其他颜色
- AndroidStudio构建项目提示错误信息“unable to find valid certification”的完美解决方案
- Android自定义View实现抖音飘动红心效果
- Android Studio 利用Splash制作APP启动界面的方法
- android surfaceView实现播放视频功能
- Android Studio中一套代码多渠道打包的实现方法
- Android自定义View实现圆环进度条
- Android启动页用户相关政策弹框的实现代码