iview form rules添加校验问题

最新推荐文章于 2024-01-19 16:39:51 发布
最新推荐文章于 2024-01-19 16:39:51 发布
阅读量484 收藏 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
    评论
vue中iview组件实现表单数据的动态校验
这个人很懒，什么都没有留下
11-03 1104
vue实现表单数据的动态校验
iView中表单(动态)Form的校验
k0933的博客
11-17 1880
iview 动态表单校验
iview中form表单验证不通过问题
weixin_46463849的博客
12-15 296
rules中的type用来限制类型，input框中的type只能限制用户输入的类型，但输入的值的类型还是string，所以需要给v-model加上number修饰符，使最终值的类型与rules中type保持一致。然后表单验证可以完美通过。在使用iview的form组件时，type为number类型的rules一直不通过，多方验证之后得到的解决方案。
iview表单校验向validator传递信息的奇淫巧计
最新发布
xiaowu0929的博客
01-19 480
如何向validator中传递数据，苦思良久，还是准备从validator函数的参数上下手，熟悉iview表单的都知道，validator参数中有一个rule属性，包含了一些信息，在我多次尝试后，发现其中的message是直接作为校验失败的提示的，且，可以在validator中修改，于是乎，我做了一个大胆的尝试！
Iview 表单验证的规则总结
赵树祥的博客
06-19 2万+
参考文档： https://github.com/yiminghe/async-validator 1. 支持的基本类型 <FormItem prop="UserId" :rules=" [ { required: true, message: '请选择一项', trigger: 'change',type:'number',min:...
iview表单rules验证有内容但是报了校验的错误
Lucky_bo的专栏
09-01 2238
在vue项目入引入了iview，使用Form表单的rules校验 设置的model和rules值都是对的 但是依然会报错 校验代码如下： weight:[{ { required:true, message:"重量不能为空",trigger:'blur'} }] 一开始很疑惑，因为对比了规则都是没问题的，但是最后发现 rulesObj:{ weight:"", //string 类型 } 但是我们 v-model="rulesObj.weight " 传进来...
iview form清除校验状态的实现
10-16
主要介绍了iview form清除校验状态的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
详解iview的checkbox多选框全选时校验问题
10-16
主要介绍了详解iview的checkbox多选框全选时校验问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
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树添加图标
iview Form 表单验证小结
cicistream
09-19 2万+
手头的项目有一个需求是创建自定义表单模板，深入使用了iview的Form控件，踩了不少iview的坑，同时也锻炼了validate相关的能力。 基本知识 Form由一些FomeItem组成，可以为Form设置rule来指定相关表单项的限制条件。 通过$ref 可以访问到 Form 组件，调用 validate 函数，即可获取相应的校验函数。iview中，Form验证是根据FormI...
vue+iview的form表单校验总结
weixin_46688629的博客
08-07 415
这篇文章时关于如何使用iview的form表单校验。主要学习如何使用form校验（以校验文字长度为例），以及如何动态添加校验规则和异步校验。 1.为需要校验的表单添加form标签 <!--注意: ref/rules/model/prop等属性是必须的--> <Form res="foemRef" :rules="formRules" :model="formData" v-if="liveNode"> <Row> <!--正常校验-->
iview Form表单校验自定义校验
qq_37496470的博客
05-13 1866
Form 组件基于 async-validator 实现的数据验证，给 Form 设置属性 rules，同时给需要验证的 FormItem 设置属性 prop 指向对应字段即可。 下面是完整代码： <template> <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80"> <FormItem label="Name" prop=.
iview中form表单自定义校验事件
weixin_48674314的博客
10-30 1124
示例一： 这里校验输入的生成的验证码与输入的验证码是否一致。 1. 在form表单里定义一个校验对象。 verify就是校验对象 <Form ref="accountNumber" :label-width="180" :model="formValidate" :rules="verify"> <Row> <Col span="18"> <Form...
关于iview表单验证的问题
Amanda_wmy的博客
01-10 3万+
关于iview表单验证的问题 iview表单验证的步骤： 第一步：给 Form 设置属性 rules :rules 第二步：同时给需要验证的每个 FormItem 设置属性 prop 指向对应字段即可 prop=”“ 第三步：注意：Form标签里面是 :model 第四步：注意：在Form标签里面必须添加 ref,相当于id,在此范围内的表单验证有效 第五步：在操作保存按钮时，添加方
vue项目汇总，iview自定义验证器的问题
Autism、陌亡
01-26 1万+
在使用iview前端组件的过程中，有时候使用它自带的验证器往往不能满足我们项目中的需求，有时候就需要按照项目需求自定义，iview自带的form验证其实不错，但有些特殊的还是需要自己来实现一些特殊的或者复杂的验证器。
在vue中使用rules对表单字段进行验证
热门推荐
我的博客
01-08 11万+
vue 中表单字段验证的写法和方式有多种，本博客介绍三种较为常用的验证方式。 1. 写在 data 中验证 表单内容 <!-- 表单 --> <el-form ref="rulesForm" :rules="formRules" :model="rulesForm" label-width="200px"> <el-form-item labe...
iview中form表单的验证规则
从入门到放弃的博客
06-05 4939
验证规则的官方说明：https://github.com/yiminghe/async-validator 大概总结如下： 参考网站： https://blog.csdn.net/ddwddw4/article/details/89216594 https://www.jianshu.com/p/ef97dbf4fcfe 内容： 1. 支持的基本类型 <FormItem ...
iview form 表单移除校验效果
05-13
iview form表单通过校验规则来确保用户输入数据的合法性。但是有时候我们需要移除某些校验规则来满足特定需求。 iview form表单提供了两种方法来移除校验规则，分别是通过表单ref属性和通过字段的prop属性。 通过表单ref属性移除校验规则，需要先获取表单对象，然后调用$refs.formName.removeRule()方法。其中，formName为表单的ref属性值，removeRule()方法中传入的参数为需要移除校验规则的字段的prop属性值。 实例如下： ```html <template> <Form :model="form" :rules="rules" ref="form"> <FormItem label="姓名" prop="name"> <Input v-model="form.name" /> </FormItem> <FormItem label="手机号" prop="phone"> <Input v-model="form.phone" /> </FormItem> <FormItem> <Button @click="removePhoneRule">移除手机号校验</Button> </FormItem> </Form> </template> <script> export default { data() { return { form: { name: '', phone: '' }, rules: { name: [{required: true, message: '请输入姓名', trigger: 'blur'}], phone: [{required: true, message: '请输入手机号', trigger: 'blur'}, {pattern: /^1[3456789]\d{9}$/, message: '手机号格式不正确', trigger: 'blur'}] } } }, methods: { removePhoneRule() { this.$refs.form.removeRule('phone'); } } } </script> ``` 通过字段的prop属性移除校验规则，只需要在校验规则中将该字段的校验规则设置为一个空数组即可。 实例如下： ```html <template> <Form :model="form" :rules="rules"> <FormItem label="姓名" prop="name"> <Input v-model="form.name" /> </FormItem> <FormItem label="手机号" prop="phone"> <Input v-model="form.phone" /> </FormItem> <FormItem> <Button @click="removePhoneRule">移除手机号校验</Button> </FormItem> </Form> </template> <script> export default { data() { return { form: { name: '', phone: '' }, rules: { name: [{required: true, message: '请输入姓名', trigger: 'blur'}], phone: [{required: true, message: '请输入手机号', trigger: 'blur'}, {pattern: /^1[3456789]\d{9}$/, message: '手机号格式不正确', trigger: 'blur'}] } } }, methods: { removePhoneRule() { this.rules.phone = []; } } } </script> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值