antd 表单必填校验有值但是不清除问题

weixin_53170500

已于 2024-03-04 00:52:39 修改

阅读量393

点赞数 1

文章标签：前端 anti-design-vue

于 2024-02-28 15:29:45 首次发布

本文链接：https://blog.csdn.net/weixin_53170500/article/details/127630354

版权

当表单内容绑定的值为:model下的子对象下的值时，此时该控件的必填校验在有值时不会清除

详细见下图

此时如何修改，上图所示案例中，只需要将表单的:model="listForm"改为:model=“listForm.base”

如下图所示

此时便解决了

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_53170500

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

React+Antd项目，Form的Input中已经有内容，但是还是提示此项为必填项，不能为空

BigFamer的博客

08-26

4962

我们在进行数据采集功能开发的时候，往往会用到Form表单，这其中必不可少的就会用到Input（多种type类型）输入框。经常还会对其中的某一些Input输入做一些必填或者某些输入格式的限制，设置默认值和placehoder等等需求场景。我在使用React + Antd构建含有多个Input组件的Form表格时，遇到了下述问题…...

jeecg-boot:前端antd 表单校验方式整理

gwcgwcjava的专栏

07-01

2946

jeecg-boot对antd-vue的校验做了封装，总体来讲分为表单校验和JEditableTable 校验：表单校验：以以下为例： <a-form :form="form"> <a-row> <a-col :span="12" :gutter="8"> <a-form-ite...

参与评论您还未登录，请先登录后发表或查看评论

vue+antd表单已输入内容但校验一直不消失问题总结

。

05-29

1587

值得注意的是，如果你的表单是在弹框里，在弹框打开的方法中是否对form进行了重新赋值，如果用等于号赋值可能会导致form缺少字段，正确做法是用对象合并的方法。使用antd表单校验规则经常出现已经填写内容了但校验提示一直存在的情况，以下是我遇到并问题总结的解决方法，希望能帮到你们。5、在表单校验规则中，输入框、文本框的触发方式最好使用blur，日期选择器、普通选择器使用change。4、确认form绑定的model是否已初始化各个字段（最常见但容易忽略的情况）3、确认form绑定的model。

ant-design-vue 可输入表格的校验方法

最新发布

m0_62626838的博客

10-10

443

1、思路，首先用a-form包裹a-table，( 主要是name的取值问题，要严格按照['',index,'校验的字段']来)

【笔记】antd 表单验证规则 —— 二选一必填（清除历史校验报错）

程序边界

11-17

1254

> 重点： > - 使用`getFieldValue`判断值 > - 在`onChange`时，使用`validateFields`重新启动校验

【ant-design-vue】a-select无法清空的解决

bbt953的博客

09-05

2458

a-select无法清空的解决

表单校验无法去除

zsm__zsm的博客

04-08

213

遇到个问题，就是表单数据来源是弹窗过后才拿到的。但是表单校验通不过。解决办法1，改成提交的时候在进行校验。或者 2，给一个默认值（第二个好用）

【JavaScript源代码】antd+vue实现动态验证循环属性表单的思路.docx

12-27

本文将深入探讨如何使用antd-vue和Vue实现动态验证循环属性的表单，满足以下需求： 1. **名称**、**对比项**和**备注**字段为必填项，初始默认为一行，支持用户添加多行。 2. 当**名称**更改时，自动清空当前行的**...

vue+antd上传图片怎么在表单验证规则

Kmagi的博客

08-04

3736

采用antDesgin，表单中有上传组件Upload，然后写了校验规则，提示图片需要上传，上传成功后，依旧提示：图片未上传如下： <a-form-model-item label="banner展示图" prop="img"> <a-upload class="uploader" name="image" list-type="picture-card" action="/api/Uplo

ant-design-vue3.x的form表单爬坑.pdf

12-16

在Ant Design Vue 3.x版本中，表单的使用与之前版本有了一些显著的变化，特别是对于嵌套表单的处理和验证方式。本文将详细解析这些变化，帮助开发者避免在升级过程中遇到的“坑”。首先，让我们关注的是嵌套表单...

Vue 2.x折腾记 - (17) 基于Ant Design Vue 封装一个配置式的表单组件

CRPER

04-16

6908

前言在写这个的时候，还是不信邪的用了vue jsx的风格去写东西，当组件的东西多了起来之后，各种报错；没错，最终我又回归到传统的写法；上一篇写了个搜索的封装，到写这个的时候发现有所可以优化的地方。效果图实现思路和功能基础的功能直接配置上来渲染，而上传组件就不大合适了；所以选择了slot来实现,如何保证传入的form-item的布局一致，则是拿slot-scope 我这边选型用的...

Vue在写表单validatorRules验证的时候出现，*必填中输入数据仍然有提示填写信息，验证rules无效

qq_41113780的博客

07-22

2015

vue

ant-design-vue 1.x 的 a-form-model怎样设置表单必填项（a-form同样适用）

FanZaiYo的博客

01-12

2464

a-input v-model="sendForm.template_test_json" placeholder="请输入json格式测试数据" :rules="[{ required: true, message: '请输入json格式测试数据' }]"/><a-form-model-item label="测试数据" prop="template_test_json"><a-form-model-item label="测试数据" prop="template_test_json">

VUE3- ant design自动校验，明明输入框都输入内容了，还是显示提醒

m0_59214979的博客

10-10

3469

本节：ant design自动校验，明明输入框都输入内容了，还是显示提醒。

表单验证输入框必填校验，输入框中存在值时，校验的提示还一直展示，校验如果有值则是必填项，并且输入的值是正确的；如果没有值，不校验

m0_60594323的博客

01-07

1494

form表单校验，表单校验某个指定属性，表单校验有值时，校验提示信息没有清除。表单中如果有值必须校验，没有值不校验

antd +vue3 a-form表单验证（校验）规则填写数值后提示仍然存在的问题嵌套

lpfhjw的博客

10-24

4564

antd +vue3 a-form表单验证（校验）规则填写数值后提示仍然存在的问题嵌套 TS 表单验证失效

【前端】vue3 接入antdv表单校验

weixin_41979605的博客

08-22

1636

这个很简单，直接写一个自定义校验方法就行了。然后校验规则里面即可，(就是用这个方法，然后debug出上面的mode未设置的问题，因为自定义方法里面的value一直是undifine,-。-)return Promise.reject("用户昵称长度应小于5个字符");} else {} else {return Promise.reject("请输入用户昵称");

ant-design-vue Table+Form表单实现表格内置表单验证，可自定义验证规则，触发必填项

m0_57071129的博客

04-18

1517

【代码】ant-design-vue Table+Form表单实现表格内置表单验证，可自定义验证规则，触发必填项。

antd 表单设置默认值校验不通过

04-28

在antd表单中设置默认值时，有时候会遇到校验不通过的情况。出现这种问题可能有多种原因，以下是几种可能的解决方法： 1.检查表单项的name属性设置默认值时，需要确保设置的默认值与表单项的name属性对应。如果设置的默认值与name属性不匹配，可能会导致校验不通过的错误。 2.检查校验规则在antd表单中，可以为表单项设置校验规则，如果校验规则不正确也会导致校验不通过。需要确保设置正确的校验规则，可以使用antd提供的常用校验规则或自定义校验规则。 3.检查表单的数据来源如果表单的默认值是从后台传入的，可能会因为数据格式不正确或者数据类型不匹配导致校验不通过。需要确保传入的数据格式正确，并与表单项的数据类型匹配。 4.设置initialValues 在antd表单中，可以使用initialValues属性为表单设置初始值。如果设置了该属性，就不需要再为每个表单项单独设置默认值，这种情况下如果发生校验不通过的错误，需要确保initialValues的值与表单项的name属性匹配。最后，如果以上方法都无法解决问题，可以将错误信息打印出来进行调试，或者参考antd表单官方文档寻找解决方法。