306  
查询码:00000922
iview踩坑记——表单验证
作者: 徐文斌 于 2020年02月27日 发布在分类 / 人防组 / 人防前端 下,并于 2020年04月23日 编辑

关于iview表单验证的问题

iview表单验证步骤:

1、给Form设置属性rules    :rules

2、给需要验证的每个FormItem设置属性prop指向对应字段       prop=""

3、注意:Form标签里面是    :model

4、注意:在Form标签里面必须添加ref,相当于id,在此范围内的表单验证有效

5、在操作保存按钮时,添加方法,对整个表单进行校验,参数为检验完的回调,会返回一个 Boolean 表示成功与失败。

粘贴图片

bug1:验证input的时候验证失败

原因:因为iview默认校验数据类型为String,而我的input用的value是number类型。

解决方法:在校验规则里加上类型。

粘贴图片

bug2:验证时间日期验证失败

原因:和input一样,日期的类型是date。

解决方法:在校验规则里加上类型。

粘贴图片

bug3:表单验证的valid返回值是Promise

粘贴图片

粘贴图片

解决方法:使用异步async/await粘贴图片


粘贴图片

自定义表单验证

粘贴图片

粘贴图片


嵌套验证

使用场景:

粘贴图片

使用方法:

粘贴图片



 推荐知识

 历史版本

修改日期 修改人 备注
2020-04-23 10:49:08[当前版本] 徐文斌 bug记录与嵌套验证
2020-03-11 16:31:49 徐文斌 增加自定义表单验证
2020-02-27 10:55:30 徐文斌 iview表单验证

 附件

附件类型

JPGJPG PNGPNG

  目录
    知识分享平台 -V 4.8.7 -wcp