挖坑指南：iView表单 日期校验出错

最新推荐文章于 2024-04-27 04:36:29 发布
置顶 最新推荐文章于 2024-04-27 04:36:29 发布
阅读量4.9k 收藏 2
点赞数 1
分类专栏： 挖坑指南 文章标签： iVIew 数据校验 date数据校验 async-validate
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39015132/article/details/83659315
版权

前言

表单数据的验证在前端是很有必要的，它是数据的第一道过滤。可以避免一些错误的发生

开始

先看看我们的使用

使用报错 

虽然iView的官方已经更新到3.0的版本了，但是目前项目中使用的还是 2.0的版本。

官方的文档：http://v2.iviewui.com/components/form

实践

对照看了官方的文档，使用方式是相同的，字段也是没有问题滴。校验为啥就会报错呢？仔细地对照一下官方的demo，终于发现了一个小小的细节。

demo

数据的类型，是滴~就是这个小小的细节。有时间要去看看这个了https://github.com/yiminghe/async-validator 

最终

加上了校验类型，就没有问题啦~~

总结

嘘寒问暖 不如打笔巨款~

 

車句
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
view ui 表单验证
weixin_41539438的博客
07-28 2198
参考文档 不是教程！ 不是教程！ 不是教程！ 学习时查资料大概记了一些，边验证边修改，还有目前只验证了几个用到的，以下内容可能会有错误，但大方向应该是没问题的，修改中……！ 在view ui中，使用标单验证总的有以下四个步骤 1、绑定:rules： :rules=“ruleValidate” 2、传递数据： prop=“name” 3、验证规则： 字段：{ [ type:‘名称’，message:‘验证不通过时提示信息’，trigger:‘触发类型blur’] } { required: true, ty
浅谈关于iview表单验证的问题
10-17
主要介绍了浅谈关于iview表单验证的问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue进阶（幺柒叁）：表单元素日期校验_vue中datetime校验
最新发布
2401_84438067的博客
04-27 966
整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》前端面试题宝典》，《前端面试题：常用算法》**[外链图片转存中…(img-ZdsLac7i-1714163777183)][外链图片转存中…(img-vPJK83Cd-1714163777185)]
关于iview表单验证的问题
热门推荐
Amanda_wmy的博客
01-10 3万+
关于iview表单验证的问题 iview表单验证的步骤： 第一步：给 Form 设置属性 rules :rules 第二步：同时给需要验证的每个 FormItem 设置属性 prop 指向对应字段即可 prop=”“ 第三步：注意：Form标签里面是 :model 第四步：注意：在Form标签里面必须添加 ref,相当于id,在此范围内的表单验证有效 第五步：在操作保存按钮时，添加方
iview 表单日期有值校验失败
weixin_39818813的博客
07-28 649
表单校验失败可能情况 1. 双向绑定使用的是:value 解决：将:value改成v-model <!-- 通关期限 --> <FormItem label="企业通关期限" prop="tannetCompanyDTO.copEndDate"> <DatePicker type="date" format="yyyy-MM-dd" //:value="form.tannetCompanyDTO.cop
iView中表单(动态)Form的校验
k0933的博客
11-17 1918
iview 动态表单校验
关于iview表单校验 date校验 多选日期校验问题
Taurus_666
06-10 2637
遇到的问题 在使用iview框架时，在后端管理系统中，通常会使用到form表单组件，当然日期也通常出现在搜索框表单中，但是有时候会出现日期组件校验错误的情况 问题分析 首先，iview采用的是async-validator的校验规则，校验类型一般分为以下几种：string、number、boolean、array、object； 其次，默认表单校验类型是string，但是日期组件 type...
iview form清除校验状态的实现
10-16
主要介绍了iview form清除校验状态的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
iview3-date-range:iview的日期选择控件，做了日期范围的限制，可自定义可选的间隔2个与、3个月等
04-10
【iview3-date-range】是基于Vue2和iview UI库的一个扩展，它为iview的日期选择器组件增加了日期范围限制的功能，并且允许用户自定义可以选择的日期间隔，如每2个月或3个月等。这个特性使得在处理日期选择时更加灵活...
iview同时验证多个表单问题总结
10-17
主要介绍了iview同时验证多个表单问题总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
iview 表单 验证
活在当下
03-30 1991
iView表单组件使用async-validator验证器对表单域中数据进行验证，给 Form 设置属性 rules，同时给需要验证的 FormItem 设置属性 prop 指向对应字段即可。 完整的验证规则请参照开源项目 async-validator。 验证方法也支持 Promise。 当我们对表单中某个string类型的域设置为必填时，我们可以使用如下规则 {type: 'string' ,required:true,message:'不能为空'} 但是如果我们直接输入空格也会通过验证 如何
Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能
10-18
本文通过实例代码给大家介绍了Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能,需要的朋友可以参考下
vue中iview组件实现表单数据的动态校验
苏苏就是小苏苏的博客
03-09 5672
1.实现效果 2.实现原理 iview组件库Form表单， ref=“formValidate”，:model=“formInline”，:rules=“ruleValidate”。 选择审核结果的时候动态的设置备注的规则，当为通过为非必填，反之为必填。 为备注项设置相应的动态rule： :rules="formInline.status == '2'? ruleValidate.remark: [{ required: false }]" 3.实现代码 <template> &l
iview 日期组件表单验证
weixin_44269412的博客
01-29 639
iview 日期组件表单验证
iview表单验证的问题
weixin_34202952的博客
09-28 427
最近在做项目的时候，关于表单验证总会遇见一些奇奇怪怪的问题，下面把表单验证的步骤和表单验证常见的问题梳理下，避免以后开发中掉坑。 表单验证的步骤 第一步：给Form设置属性:rules="ruleadd1"。 第二步：给Form设置属性:model。 第三步：在Form标签里面必须添加ref，相当于id，在此范围内的表单验证有效。 第四步...
iview Form表单验证思路整理
weixin_42787326的博客
01-31 1849
项目基本代码如下  Modal 和Form结合实现需求 在 Form 内，每个表单域由 FormItem 组成，可包含的控件有：Input、Radio、Checkbox、Switch、Select、Slider、DatePicker、TimePicker、Cascader、Transfer、InputNumber、Rate、Upload、AutoComplete、ColorPicker。  ...
iview 的 时间date-picker 为 datetimerange 和Select为value=“ “ 的验证问题
qq_33164351的博客
08-10 517
1.iview的 Select下拉框的时候,数据验证必填,选择了数据,却一直提示验证不能通过 <Form :model="formData" ref="formValidate" :rules="ruleValidate" <FormItem label="请选择类型" prop="depttype" label-position="top"> <Select v-model="formData.depttype" value="formData.depttype"&g
iview datepicker type datetimerange校验问题
zyqgt960812的博客
11-22 852
iview datepicker datetimerange validate
iview在修改页面，date-picker总是提示验证未输入问题
dante1987的博客
09-04 346
iview在修改页面，date-picker总是提示验证未输入问题，加上type:'date'，就ok ruleValidate: { birth: [ { required: true, type: 'date', message: '出...
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> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值