iview input框校验number类型总是提示错误

最新推荐文章于 2024-09-14 15:09:44 发布

原创最新推荐文章于 2024-09-14 15:09:44 发布 · 2.8k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

iView 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何在前端开发中实现输入框的数值类型验证。通过在Input组件中设置number属性，并结合ruleValidate进行非空及类型检查，确保用户输入的数据符合项目单价的要求。

首先Input框添加一个 number 属性


<Input placeholder="请输入项目单价" number  v-model="dataObj.projectPrice"></Input>

随后 ruleValidate 中，在非空校验中添加一个 type: ‘number’

projectPrice: [
          { required: true, type: 'number', message: '请输入项目单价', trigger: 'blur' }
        ],

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

多动手,勤思考

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

iview form校验input输入框number类型

weixin_60991607的博客

12-13

3787

总结一下input数字校验 1、speedLimit: [ { required: true, message: '请输入。。。', trigger: 'blur' }, { validator: isPositiveNum, trigger: 'blur' } ], 加上trigger，没有设置type，默认是string，数据类型没法通过校验 2、speedLimit: [ { required: true, messag...

1 条评论您还未登录，请先登录后发表或查看评论

iview校验表单----必填选项失败

xuan的博客

04-24

4639

1.问题：设置的是必填，明明有数据却总是显示校验错误。原因：用iview自带的表单验证时，一直验证不通过，因为iview默认校验数据类型为String，而的表单是其他数据类型所以一直验证不通过。解决：添加校验的对应数据类型即可。如我的数据类型是数组则设置为 type:'array'（数组类型）其他的有：type:'number' （数字类型） type: 'data'（日期类型...

iview inputNumber 输入框有值但是校验失败

weixin_39818813的博客

12-09

3151

表单校验的时候，输入输入的数字，但是表格依然校验失败。原因：校验的时候，是先执行校验的回调函数，再执行修改赋值。可以通过打印验证是否是这种情况：很明显，获取修改后值的方法111111打印在后，校验逻辑2222打印在前。 <template> <Form ref="form" inline :model="form" :label-width="120" :rules="rules"> <FormItem label="汇款金额" prop="money

iview组件使用总结

風缘的博客

10-25

2万+

用iview组件做一个后台管理系统，以下是使用过程遇到的问题，以及解决方法总结

Element ui rules中的type改为number为什么输入数字还是提示错误

weixin_65560643的博客

12-30

2087

在el-input标签中的v-model后加上.number即可

iview form表单校验 input number 报出number不能为空

Cribug8080的博客

03-04

1万+

在iview表单校验中，需要指定校验类型，不然给表单赋予新值时会出问题。比如，报错不能为空，特别是number类型。 <Form :model="changeModal.data" :rules="changeModalRules" ref="changeModalForm" label-position="right" :label...

Vue + Iview 表单校验，踩坑总结

weixin_45341113的博客

03-27

1675

Vue + Iview 表单校验，踩坑总结 1.为需要校验的form表单添加表单校验（这里是在当前页面做一个在列表点击按钮在当前页出现的一个modal页面）   <template> <div> <div> ...

iView中的input文本输入框只允许输入4位数字，格式校验后再发送请求做别的校验

m0_51608940的博客

11-14

2392

iView中的input文本输入框只允许输入4位数字的校验 <template> <div> <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80"> <FormItem label="工号" prop="jobNumber"> <Input v-model="formValidate.jobNumbe

Iview 表单验证的规则总结

热门推荐

赵树祥的博客

06-19

2万+

参考文档： https://github.com/yiminghe/async-validator 1. 支持的基本类型 <FormItem prop="UserId" :rules=" [ { required: true, message: '请选择一项', trigger: 'change',type:'number',min:...

在element中的table表格中运用InputNumber修改不成功

weixin_52005030的博客

07-26

1239

在项目中,在table表格中,使用计数器改变数量的话,只能点击一次,没有改变数组里面的数据,或者改变数据重新渲染的话,checkbox选中的数据也会改变, 如何实现可以修改这个bug,直接上代码首先在表格中定义一个:key=‘tablekey’ <el-table :data="products.products" style="width: 100%; margin-top: 20px" >

vue ivew的input type=“number” 只能输入数字，解决输入法问题导致输入字母且去右侧上下箭头按钮完美解决方法

晨曦的博客

04-07

4792

input type="number"很重要，防止中文输入法输入出现错误问题，如果右侧上下箭头没有去掉，请试着加下/deep/如果获取不到event，请试下$event。

uniapp中引用uView后，使用u-input标签的type=‘number‘在小程序失效

weixin_42884605的博客

10-17

4728

uniapp

IviewUI form校验number类型有值却提示无效问题

weixin_49032614的博客

11-16

1512

在跟后端对接接口的过程里少不了表单校验的东西，除了string类型外当然也有number数字类型的，但是当我使用number类型的下拉框时，明明选中打印是这个字段是有值的，但是却还是校验失败提醒。我当时以为是个BUG，于是解决办法是先用字符串，提交再转成number类型，但是这样明显麻烦了很多，直到后来————我在IviewUI的文档里查到了rules规则里面有个校验类型的。在校验规则中加入type: "number"即可解决问题。

【问题记录】el-input-number组件数值null显示为0的解决方案

草率小猿的博客

04-20

1万+

本文介绍了如何将el-input-number默认值设置为空。

iview中InputNumber 数字输入框会有一个默认值1

jibuyueqian的博客

08-04

2585

InputNumber 默认值问题

iview的InputNumber组件有值的情况下校验失败