iview表单的校验类型，类型不同导致校验异常的解决。

最新推荐文章于 2023-06-12 23:58:45 发布
最新推荐文章于 2023-06-12 23:58:45 发布
阅读量1.1k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： vue iview js 文章标签： vue 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Yi2008yi/article/details/119139301
本文探讨了iView表单中input与InputNumber组件的校验问题，特别是当默认字符型校验不适用时如何调整为数值型校验。文章提供了具体的解决方法，并建议查阅iView官方文档获取更详细的rules字段类型说明。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.iview表单的校验类型默认是字符型，所以在一些情况下，对于input框或者是InputNumber框时，因其是数值。所以会导致无法校验的异常。例如以下案例.

2.所以要处理这一异常（非常反人类）；就得给对于的校验字段设置对应的类型。

 

 

 3.更多校验字段的类型说明，可前往iview官网和表单的rules字段说明查看明细。iview的form表单。form表单的rules字段类型详解

iview 非空验证_记录 iView 的表单验证
weixin_32260275的博客
02-01 294
iview表单验证必要设置1. 给 Form 标签用 :model 绑定数据2. 给 Form 标签里面必须添加 ref , 用于最后提交获取 Form 表单的实例3. 给 Form 设置属性 rules :rules4. 给需要验证的每个 FormItem 设置属性 prop , 用于表单验证和绑定属性一致iview验证多个表单问题export default {methods:{this.$r...
iView中表单(动态)Form的校验
最新发布
k0933的博客
11-17 3019
iview 动态表单校验
iview 日期控件类型type=“datetimerange“ 表单校验规则
11-29 6021
1.需求描述 编辑页面需要做日期控件类型type="datetimerange"的表单校验 2.使用场景 规则管理--》编辑弹窗表单校验 3.问题描述 日期控件类型type="datetimerange"或者 type="daterange" 的表单校验不提示错误信息 4.解决思路 修改规则，代码如方案 5.解决方案 (已解决加入) <Form-item label=...
iview表单验证的问题
你如今的气质里，藏着你走过的路，经历过的事，读过的书，和爱过的人。
08-12 404
第一步：给Form设置属性:rules="ruleadd"。 第二步：给Form设置属性:model。 第三步：在Form标签里面必须添加ref，相当于id，在此范围内的表单验证有效。 第四步：给需要验证的每个FormItem设置属性prop指向对应的 第五步：在操作按钮时，添加方法，对整个表单进行校验，参数为校验完的回调，会返回一个Boolean表示成功与失败 一 iview进行表单验证sel...
html表单验证多个字段,iview同时验证多个表单问题总结
weixin_36315079的博客
06-03 362
iview验证一个表单问题：在上一篇文章中总结了iview表单验证的问题。其实有两种写法：在点击验证时，这样写时，注意在前面的方法中将要验证的form表单加进去。//点击确认按钮确定addAreaOK(name){this.$refs[name].validate((valid)=>{if (valid){alert('验证成功')}})}还有一种写法：保存按钮不传form表单，在验证时直接...
iview表单rules验证有内容但是报了校验的错误
Lucky_bo的专栏
09-01 2451
在vue项目入引入了iview，使用Form表单的rules校验 设置的model和rules值都是对的 但是依然会报错 校验代码如下： weight:[{ { required:true, message:"重量不能为空",trigger:'blur'} }] 一开始很疑惑，因为对比了规则都是没问题的，但是最后发现 rulesObj:{ weight:"", //string 类型 } 但是我们 v-model="rulesObj.weight " 传进来...
iview form清除校验状态的实现
10-16
在进行前端表单设计和开发时，经常需要对表单的校验状态进行管理。特别是在具有动态表单功能的应用...对于使用iview框架的前端开发者来说，这些知识点非常有价值，有助于在开发过程中更加灵活地处理表单校验相关问题。
iview中Select 选择器多选校验方法
01-19
iview使用的校验是根据async-validator来实现数据验证。验证规则可前去查看开源项目 多选模式下的select组件校验使用type为array,可设置len属性来规定数组的长度，设置len:1则不是数组长度为1则通过校验，不设置则...
详解iview的checkbox多选框全选时校验问题
10-16
但是，在做表单校验的时候，却发现了一个问题。问题在于，当用户通过点击全选来选择所有的项目（例如香蕉、苹果和西瓜）时，绑定在`v-model='checkAllGroup'`上的校验方法不会被触发。而当用户手动选择或取消选择每...
浅谈关于iview表单验证的问题
10-17
本文主要围绕iview表单验证过程中可能出现的问题进行探讨，并提供了一些解决方案。 首先，表单验证步骤的准确性对于确保数据的正确性和安全性至关重要。iview表单验证的基本步骤包括： 1. 为Form组件添加rules属性...
iView表单验证trigger多种触发方式:
weixin_68849671的博客
06-12 1858
iView表单验证trigger多种触发方式:
关于iview表单验证的问题
热门推荐
Amanda_wmy的博客
01-10 3万+
关于iview表单验证的问题 iview表单验证的步骤： 第一步：给 Form 设置属性 rules :rules 第二步：同时给需要验证的每个 FormItem 设置属性 prop 指向对应字段即可 prop=”“ 第三步：注意：Form标签里面是 :model 第四步：注意：在Form标签里面必须添加 ref,相当于id,在此范围内的表单验证有效 第五步：在操作保存按钮时，添加方
iview formitem 自定义非空校验，和其他校验。根据表单其他字段决定是否非空校验。
qq_27312237的博客
02-01 2052
我遇到的问题：表单中有某字段，要根据别的字段来判断这个字段是否要进行非空校验，其他复杂的校验也同理。 我直接使用的iview的校验：但是会出现某些字段即使填上值也会报为空的错，输入框和选择框已经都做过是string而不是number的处理表单字段也打印出来是有值的，所以排除这两种情况。 原先使用的校验方式： <FormItem label="企业名称" prop="orgName" :rules="[{required: true, message: '不能为空',trigger: 'b
iview组件安装、加载，以及关于iview的校验规则和相关校验函数
awd15771131554的博客
03-08 3890
安装iview 1、安装依赖 （1） 从node.js官网下载并安装node，安装过程很简单，一直点下一步就ok了，安装完之后，我们通过打开命令行工具（win+R）,输入node -v 命令，查看node的版本，若出现相应的版本号，则说明你安装成功了。 npm包管理器，是集成在node中的，所以安装了node也就有了npm,直接输入 npm -v 命令，显示npm的版本信息。 （2） 安装cnpm， 在命令行中输入 ： npm install -g cnpm --registry=http://regis
iView输入框禁止输入特殊字符，只可输入中文、数字、字母
Kino的博客
08-09 1955
一、HTML <Form-item label="导出名称: "> <Input v-model="file_name" @on-keyup="btKeyUp()" @on-keydown="btKeyDown()" type="text" style="width: 280px" clearable placeholder="请输入导出名称" /> </Form-item> 二、JS //只能输入汉字英文数字 btKeyDown(name) { thi
iview render表格中渲染表单及验证
杨大刚的博客
12-29 7542
最近在使用iview开发项目，实践埋坑 1. 在iview表格中渲染表单，并进行验证 如图：  看了官方的table组件， 首先想到的是render方法实现 使用render方法实现 { title: '礼金编号', key: 'activity_code', align: 'center', width: 100, render: (h, pa...
解决iview模态框modal在使用@on-ok事件时，校验失败时也会关闭模态框
Mini_小仙女的博客
11-18 3315
问题场景：iview踩坑之modal模态框使用@on-ok事件后，即使校验失败也会关闭模态框。 解决方案：使用中的自定义插槽slot来自定义写底部按钮，然后通过v-model控制模态框的显示与隐藏。 <Modal v-model="modifyImgModel"> <div slot="footer" align="center"> <Button class="btn" size="default" type="default" @click="cancel
iview表单校验，输入框有值校验失败
weixin_39818813的博客
11-30 3392
问题 当做表单校验时，输入框回显了后端返回的值，但是点击确认按钮时，却校验失败，提示当前项不能为空。 分析： 由于后端返回的是number类型，而其前端却使用的是普通输入框，所以导致类型不匹配。普通输入框即使我们输入的是数字，打印出来的值也会是字符串，这就说明了，普通输入框不可能会输出数字，但是回显是又是数字，好了，类型不匹配，验证自然不通过。 解决 让类似保持一致，可以把普通输入框改成数字输入框，并确保后台返回的类似也是数字。 也可以继续使用普通输入框，然后在获取后台对应的值的时候，将number转换为
iview 表格内表单校验
09-06
iview是一款基于Vue.js的UI组件库，提供了丰富的表格组件和表单校验功能。 在iview的表格组件中，可以使用表单校验功能来对每一行或特定列的数据进行校验。可以根据需要设置表格的rules属性来定义校验规则。 首先，我们需要定义校验规则，可以使用常见的校验规则例如required、max、min等，也可以定义自定义的校验规则。每个校验规则都可以附加一条错误信息。 在表格的columns属性中，可以通过scopedSlots可以定义每一列的渲染方式。在scopedSlots中，我们可以使用iview提供的FormItem组件来实现表单校验功能。 具体实现步骤如下： 1. 在表格的columns属性中，为需要校验的列设置scopedSlots属性，并在scopedSlots中使用FormItem组件包裹需要校验的表单元素。 2. 在FormItem组件中，可以使用prop属性来指定表单元素对应的字段名。同时，可以在FormItem组件中添加rules属性，指定对应的校验规则。 3. 在设置完校验规则后，可以通过v-model来与数据进行双向绑定。在校验不通过时，FormItem会自动显示错误信息。 通过以上步骤，我们就可以在iview的表格组件中实现表单校验功能。当用户在表格中输入数据时，会根据定义的校验规则进行实时校验，并在不通过时给出错误提示。 这样的表格内表单校验功能，可以帮助开发者更方便地对表格中的数据进行校验和验证，确保数据的准确性和完整性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值