iview表单验证的问题

MycLambert 发布于2019-08-23 12:10 / 445人阅读

摘要：最近在做项目的时候，关于表单验证总会遇见一些奇奇怪怪的问题，下面把表单验证的步骤和表单验证常见的问题梳理下，避免以后开发中掉坑。进行表单验证时间日期验证失败的问题我下拉框一样，日期的类型是类型，所以需要额外设置类型。

最近在做项目的时候，关于表单验证总会遇见一些奇奇怪怪的问题，下面把表单验证的步骤和表单验证常见的问题梳理下，避免以后开发中掉坑。

表单验证的步骤

第一步：给Form设置属性:rules="ruleadd1"。
第二步：给Form设置属性:model。
第三步：在Form标签里面必须添加ref，相当于id，在此范围内的表单验证有效。
第四步：给需要验证的每个FormItem设置属性prop指向对应的
第五步：在操作按钮时，添加方法，对整个表单进行校验，参数为校验完的回调，会返回一个Boolean表示成功与失败

下面我们做一个表单验证的例子 iview进行表单验证select的时候验证失败的问题

用iview自带的表单验证select标签的时候，一直验证不通过，因为iview默认校验数据类型为String，而我们项目中select用的value有时候是number类型的，有时候是String类型的，要根据具体情况设置不同的type类型。

iview进行表单验证时间日期验证失败的问题

我下拉框一样，日期的类型是data类型，所以需要额外设置type类型。

ruleValidate: {
   advance:[
           { required: true, message: "预送达时间不能为空", trigger: "change" ,type: "date"},
        ],
      }

iview进行多重验证的写法

多重验证包括给一个数组加多个验证条件，比如第一要验证不能为空，第二要验证限制一些长度，写正则表达式等等。

ruleValidate: {
             goodsNum: [
                     { required: true, message: "数量不能为空", trigger: "blur" },
                     { type: "string",pattern:/^(([1-9]d{0,3})|0)(.d{0,2})?$/, message:"数量应为正浮点数且不超过9999.99", trigger:"blur"},
                        ],
      }

GPU云服务器云服务器提示，html5的表单验证阿里云服务器的验证问题外网表单提交问题验证表单

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98043.html

async-validator、iview-ui中碰到有值提示为空的原因

摘要：但是根据获取值赋值给表单对象时，表单验证提示为空问题解决后来我才发现原因后来问题在表单值的类型上这是提交给接口的值这是接口返回值，一个是类型的，一个是类型的，而验证在里不设置类型是无法识别的。赶项目比方说我就把返回值都转成类型。起因使用iview-ui写的后台管理系统时，碰到提交表单的时候正常。但是根据id获取值赋值给表单对象时，表单验证提示为空？！问题解决后来我才发现原因：后...

mikyou 2019-08-23 16:57 评论0 收藏0
iview 使用总结

摘要：开发后台系统问题总结项目参考了用了包裹页面进行缓存点击可切换不会重新渲染在特定页面比如详情页需要每次刷新的时候添加进行相关的刷新导致了另外一个问题最初跳转时用的传参刷新参数就没了特改为传参涉及到关闭点击等多个问题用存储数据并做了最大限 vue+iview 开发后台系统问题总结项目参考了iview-admin tags 用了keep-alive 包裹 router-view,页面进行...

王陆宽 2019-08-23 10:51 评论0 收藏0
自定义表单生成器form-create v2介绍

摘要：介绍是一个可以通过生成具有动态渲染数据收集验证和提交功能的表单生成器。并且支持生成任何组件。结合内置种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。介绍 form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成器。并且支持生成任何 Vue 组件。结合内置17种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。文档 | git...

lufficc 2019-08-23 18:16 评论0 收藏0
Vue高效UI组件库—iView开发实践

摘要：它的文档也是相当详细，每个功能都配有详细说明和实例代码，直接复制就可以使用，我们也计划在明年启动英文文档翻译计划。明年会启动英文文档翻译计划，也希望喜欢和支持，同时英语不错的同学可以加入我们，一起参与翻译。前段时间在微软参加活动，分享了 TalkingData 开源的基于 Vue.js 的高效 UI 组件库 iView 的一些开发经验，现整理成文，和大家探讨。 showImg(htt...

wean 2019-08-21 14:43 评论0 收藏0
iView 发布 1.0 正式版，43 个 UI 组件助力中后台业务开发

摘要：时隔半年多，终于迎来了它的第一个正式版本，到目前版本，已经有个常用组件，从功能和设计上，是最接近的实现。主要服务于中后台业务，目的就是让网站快速成型上线。时隔半年多，iView 终于迎来了它的第一个正式版本 1.0.0，到目前版本，已经有 43 个常用 UI 组件，从功能和设计上，是最接近 Ant.Design 的 Vue.js 实现。关于 iView 1.0 GitHub 地址...

voidking 2019-08-20 14:24 评论0 收藏0