Ant design vue 表单form自定义验证在提交时不生效

最新推荐文章于 2024-07-19 10:30:06 发布
最新推荐文章于 2024-07-19 10:30:06 发布
阅读量334 收藏
点赞数 3
分类专栏： Bug合集 文章标签： vue.js javascript 前端 anti-design-vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43437325/article/details/137636769
版权
作者在使用Antdesignvue的form组件时遇到校验问题，发现当提交按钮在表单内未指定类型为submit时，会导致校验不生效。解决方案是将提交按钮的HTML类型改为submit，以确保表单功能正常工作。
摘要由CSDN通过智能技术生成

使用Ant design vue的form表单时，自定义校验，发现输入框只会在鼠标移开后校验。当我点击提交时，校验不生效。
对着官方例子找了很久，都没发现我自定义的校验有写的不对的地方。
最后在别的例子中找到了一句：
在这里插入图片描述
Antd 中 如果提交按钮在表单外要使用form.submit方法调用表单功能，如果提交按钮在表单内则最好将其类型标明为“submit”。
我的按钮在表单内，之前没标明类型 ，改成 submit后校验可以正常生效了。

<a-form-item>
	<a-button type="primary" html-type="submit" block @click="login">login</a-button>
</a-form-item>
言语三千
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
SpringBoot+AntDesignVue实现excel导入功能
07-20
在本篇文章中，我们将介绍如何使用 SpringBoot 和 AntDesignVue 实现 Excel 导入功能。这个功能主要是使用 Ant Design Vue 中的 upload 组件来实现导入 excel 文件的功能。 标题： SpringBoot+AntDesignVue 实现 ...
antdv ant-design-vue 自定义主题颜色.pdf
12-16
在Ant Design Vue (antdv) 中，自定义主题颜色是一项常见的需求，这使得开发者可以根据自己的品牌风格或设计规范调整UI的颜色。本篇文章将详细介绍两种不同的方法来实现这一目标。 首先，我们来看第一种方法，即...
Ant Design Vue表单校验失效问题
cnbyz的博客
11-24 3906
form表单添加校验失效
ant design表单修改后立即提交表单，验证总是失败，但验证规则全部通过
miin_ying的博客
02-15 870
ant design表单验证结果outOfDate为true时的处理
ant design vue自定义表单验证不生效和自定义校验内容有值后自动清除警告的方法
动感超人的博客
10-19 6696
从而如果有警告提示信息,尽管用户在之后输入了新值,也依旧会有报错,那么要怎么解决呢?有时候我们使用了自定义规则校验,无论是。
antd modal表单验证不起作用
花木兰
05-17 1235
参考 antd官方文档
antd 动态自定义表单验证失效
rojie0的博客
08-16 1723
antd 动态表单验证
vue rules未生效
qq_34629527的博客
04-11 564
vue rules不生效
antd表单编辑时，校验失效
清风了了的博客
05-21 2637
提交表单时需要组织表单的默认行为。 handleSubmit = (e) => { e.preventDefault(); ...... } 最近遇到的一个坑，记录一下。
Vue-Ant Design Vue-普通及自定义校验实例
01-18
这段时间在使用Ant Design Vue进行项目的前端部分开发，进行一个记录，分享… Ant Design Vue Ant Design Vue是 Ant Design 3.X 的 Vue 实现，开发和服务于企业级后台...可以让熟悉Ant Design的在使用Vue时，很容易的
ant-design表单处理和常用方法及自定义验证操作
01-22
首先要说一下antdesign这个框架API和demo丰富，而且开发环境提供对应的warning来纠正用户的错误。是一个很好的组件库。 关于表单验证方面是依赖于 async-validator 库。百度的san-xui组件库的表单验证也是依赖与...
ant-design-vue 实现表格内部字段验证功能
10-15
主要介绍了ant-design-vue 实现表格内部字段验证功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
Ant Design Vue 解决表单验证＋多选框引发的输入值不生效问题
Ljq1041054607的博客
03-29 336
Ant Design Vue 解决表单验证＋多选框引发的输入值不生效问题开发环境
【Antd】antd的Form表单项用Form.Item包裹后，表单校验不生效的原因及解决办法
hzxOnlineOk的博客
11-22 1498
包裹住了，这会导致无法被Form表单识别并抓取，因为Form默认只允许放一个子元素。的样式，起到和内部放置div一样的效果，可以认为。这时候我们应该增加一个。
antd 表单校验问题
lfalt的博客
06-28 767
情况 校验有时执行有时不执行，或者点击提交打印valid 没有执行。
Antd Form校验没有效果的问题
weixin_43924896的博客
03-01 2614
Antd的Form表单使用
React Ant Design 中内置、自定义表单验证的火速上手
笔记、经验、日常分享
04-18 2180
如何在 React Ant Design 中结合自定义验证规则和内置验证规则,实现复杂的表单验证逻辑。该示例涵盖了表单创建、验证规则定义、表单提交等完整的使用场景。掌握在 React Ant Design 中进行表单验证的各种技巧。
ant-design-vue a-form 无法校验自定义组件
jiaweiliao的博客
02-18 931
## 问题背景 项目中有一个需求，利用form表单校验表单内部值是否合法，当时需要校验一个自定义upload组件上传文件，按照官方文档的方式绑定对应的变量，校验官方input、select等组件都是能够成功的，但是校验自定义的upload组件却始终无法生效。当时使用版本为 "ant-design-vue": "^3.0.0-beta.7"。form表单无法主动校验自定义组件，需要由组件内部通知外部form表单进行校验。
使用Vue实现点击页面触发特效
最新发布
qq_45569925的博客
07-19 697
在页面上的指定区域内进行点击，则会在页面上显示设置好的随机文本，此文本出现后会执行动画，动画效果为节点在1s之内向右上方移动并在移动的过程中完成180°翻转，最后消失。
vue3+ant design vue的form表单提交时怎么触发表单验证
07-12
在 Vue 3 中使用 Ant Design Vue 的 Form 表单组件，你可以通过使用 `Form` 组件提供的 `validate` 方法来触发表单验证。下面是一个示例： ```vue <template> <a-form ref="form" :model="formData"> <a-form-item label="姓名" name="name" rules="required"> <a-input v-model="formData.name" /> </a-form-item> <a-form-item> <a-button type="primary" @click="submitForm">提交</a-button> </a-form-item> </a-form> </template> <script> import { ref } from 'vue'; import { Form, Input, Button } from 'ant-design-vue'; export default { components: { 'a-form': Form, 'a-form-item': Form.Item, 'a-input': Input, 'a-button': Button }, setup() { const formRef = ref(null); const formData = ref({ name: '' }); const submitForm = () => { formRef.value.validate((valid) => { if (valid) { // 验证通过，执行表单提交操作 console.log('表单验证通过'); // ... } else { console.log('表单验证失败'); } }); }; return { formRef, formData, submitForm }; } }; </script> ``` 在上面的示例中，我们使用了 Vue 3 的 Composition API，通过 `ref` 创建了一个 `formRef` 引用对象，用于获取 `Form` 组件的实例。然后，我们定义了一个 `formData` 引用对象来绑定表单数据。 在 `submitForm` 方法中，我们通过 `formRef.value.validate` 方法来进行表单验证。当验证完成后，会执行回调函数，其中的 `valid` 参数表示是否通过验证。如果通过验证，你可以在回调函数中执行表单提交的操作。如果未通过验证，你可以在回调函数中处理验证失败的情况。 需要注意的是，上述示例中只给了姓名字段一个简单的 "required" 规则，你可以根据实际需求添加更多的验证规则。在 `name` 字段的 `a-form-item` 组件上，你可以使用 `rules` 属性传递一个数组来定义验证规则，例如：`rules="[ { required: true, message: '请输入姓名' } ]"`。 希望以上信息对你有帮助！如果你还有其他问题，请随时提问。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值