iview form rules添加校验问题

最新推荐文章于 2024-01-19 16:39:51 发布
最新推荐文章于 2024-01-19 16:39:51 发布
阅读量526 收藏 10
点赞数 8
文章标签： view design 前端 javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaowu0929/article/details/135618806
版权

今天在开发过程中发现有关iview表单校验的一个非常离奇的bug。

我之前心血来潮，直接向从js文件引入的表单校验rules数组添加validator函数，本以为使用箭头函数然后从this中获取相应变量的方式没有问题，但是今天突然发现bug。在formData中相应startTime符合条件的情况下，仍然提示‘结束时间不能小于开始时间’，代码如下图所示。

然而，在多次测试后发现，这个this一直是第一次获取到的那个this，内部所有的值都没有跟据组件内的变化而变化，也就是说，validator第一次拿到this之后，就固化下来了。我不清楚是什么原因导致的，后来的解决方案是将validator函数写在js文件中，把原本作为对象引入的twoValidate修改为函数，在组件中通过call绑定this调用，目前测试下来没有发现问题

xiaowu0929
关注
  • 8
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
iview form清除校验状态的实现
10-16
本文针对iview框架下的form组件，详细介绍了如何实现清除校验状态的功能。 首先，我们需要注意iview中的form组件以及其内部的form-item组件。form-item组件是用于包裹单个表单项，比如输入框、选择器等，而form组件...
Iview 表单验证的规则总结
zshsats博客
09-20 1万+
Iview 表单验证的规则总结 <FormItem prop="UserId" :rules=" [ { required: true, message: '请选择一项', trigger: 'change',type:'number',min:1}, ]" > <Select ...
vue中iview组件实现表单数据的动态校验
这个人很懒，什么都没有留下
11-03 1130
vue实现表单数据的动态校验
iview表单rules验证有内容但是报了校验的错误
Lucky_bo的专栏
09-01 2276
在vue项目入引入了iview，使用Form表单的rules校验 设置的model和rules值都是对的 但是依然会报错 校验代码如下： weight:[{ { required:true, message:"重量不能为空",trigger:'blur'} }] 一开始很疑惑，因为对比了规则都是没问题的，但是最后发现 rulesObj:{ weight:"", //string 类型 } 但是我们 v-model="rulesObj.weight " 传进来...
iview表单校验向validator传递信息的奇淫巧计
最新发布
xiaowu0929的博客
01-19 515
如何向validator中传递数据，苦思良久，还是准备从validator函数的参数上下手，熟悉iview表单的都知道，validator参数中有一个rule属性，包含了一些信息，在我多次尝试后，发现其中的message是直接作为校验失败的提示的，且，可以在validator中修改，于是乎，我做了一个大胆的尝试！
iView中表单(动态)Form的校验
k0933的博客
11-17 2097
iview 动态表单校验
详解iview的checkbox多选框全选时校验问题
10-16
在使用iview的checkbox组件时，我们可能会遇到一个校验问题，特别是在涉及到全选功能时。全选功能指的是当用户点击全选复选框时，会自动选中或取消选中所有其他复选框。 在iview的官方示例中，全选复选框使用了`@...
iview同时验证多个表单问题总结
12-29
Form ref=addAreaForm :model=addAreaForm :rules=ruleValidate :label-width=120></Form> //点击确认按钮 <Button type='primary' @click='addAreaOK(addAreaForm)'>确定</Button> addAreaOK...
iview树添加图标
10-31
iview树添加图标
Vue＞＞＞iView＞＞＞rule＞＞＞校验字段(手机号&邮箱)——一蓑烟雨任平生
Jaeger_Java的博客
12-01 1102
老规矩，记录代码，废话不多说，直接看代码 第一步 <Form ref="formValidate" :model="tableData" :label-width="150" :rules="ruleValidate"> ref : 表格(方便后面提交整体校验) :model : 实体类 :rules :校验规则 第二步 <Col span="8"> <FormItem label="手机号：" prop="phone">
iview form 表单 自定义参数验证 validate
solocao的专栏
11-24 1万+
需求，使用的是iview框架的Form组件，一般简单input类型数据，使用简单的验证配置就可以达到效果。如官方的写法。 iview 表单验证 地址 https://www.iviewui.com/components/form iview 默认验证库 async-validator 地址 https://github.com/yiminghe/async-validator ruleValida...
iview Form 表单验证小结
热门推荐
cicistream
09-19 2万+
手头的项目有一个需求是创建自定义表单模板，深入使用了iview的Form控件，踩了不少iview的坑，同时也锻炼了validate相关的能力。 基本知识 Form由一些FomeItem组成，可以为Form设置rule来指定相关表单项的限制条件。 通过$ref 可以访问到 Form 组件，调用 validate 函数，即可获取相应的校验函数。iview中，Form验证是根据FormI...
vue + iview rules表单验证有值却提示错误，验证不过
weixin_39818813的博客
04-01 3374
内容 <FormItem label="重量（KG）" prop="grossWt"> <Input v-model="detailData.grossWt" /> <!-- {{ detailData.grossWt }} --> </FormItem> rules grossWt: [{ required: true, message: ".
iView Form 表单校验注意点
嘿嘿
04-20 1207
iView Form 表单校验注意点 由pinooc 2019年8月6日 设置 rules, 并制定 prop <Form ref="topicForm" :model="topicForm" :rules="topicFormValidate" :label-width="80"> <FormItem label="名称" prop="topicName"> <Input type="text" v-model.
关于iView UI的表单Form如何进行前端验证
m0_57945629的博客
05-12 2031
使用iViewUI组件进行表单设计的时候，需要进行到的前端验证。 一、引入iView组件 二、表单结构设计完成 三、确保表单元素Form相关指令正确设定 <Form style="border-bottom: 1px solid #ddd" :rules="ruleValidate" //必须设置为:rules :model="addMsgdata" //必须设置为:model :label-width="110" .
iview中form表单验证不通过问题
weixin_46463849的博客
12-15 367
rules中的type用来限制类型，input框中的type只能限制用户输入的类型，但输入的值的类型还是string，所以需要给v-model加上number修饰符，使最终值的类型与rules中type保持一致。然后表单验证可以完美通过。在使用iview的form组件时，type为number类型的rules一直不通过，多方验证之后得到的解决方案。
iview form 表单移除校验效果
05-13
iview form表单通过校验规则来确保用户输入数据的合法性。但是有时候我们需要移除某些校验规则来满足特定需求。 iview form表单提供了两种方法来移除校验规则，分别是通过表单ref属性和通过字段的prop属性。 通过...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值