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

最新推荐文章于 2024-04-18 17:25:59 发布
最新推荐文章于 2024-04-18 17:25:59 发布
阅读量300 收藏
点赞数 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 实现 ...
vue-form表单验证是否为空值的实例详解
10-16
在开发过程中，表单验证是必不可少的一个环节，它确保用户输入的数据符合预期的格式和要求。Vue-form 是 Vue.js 社区中用于处理表单的库，它提供了一种便捷的方式来管理表单状态、验证和提交。在这个实例中，我们将...
Ant Design Vue表单校验失效问题
cnbyz的博客
11-24 3859
form表单添加校验失效
ant design表单修改后立即提交表单，验证总是失败，但验证规则全部通过
miin_ying的博客
02-15 842
ant design表单验证结果outOfDate为true时的处理
React Ant Design 中内置、自定义表单验证的火速上手
最新发布
笔记、经验、日常分享
04-18 1969
如何在 React Ant Design 中结合自定义验证规则和内置验证规则,实现复杂的表单验证逻辑。该示例涵盖了表单创建、验证规则定义、表单提交等完整的使用场景。掌握在 React Ant Design 中进行表单验证的各种技巧。
解决antd表单layout=“horizontal“的布局问题
cai_niao5623的博客
09-24 4622
ps：本人菜鸟一枚，仅记录工作中遇到的问题，还请广大网友多多包涵，不喜勿喷，谢谢~ 正文：今天用Antd Design的表单的时候，UI让我做个简单的表单，里面label和内容在一行显示，下面是UI要求做成的样子 这是我做的样子 我发现我无论怎么捯饬，标题很内容都在两行上去显示，后来看了官网的介绍，才发现通过设置这两个属性就可以解决这个问题 下面是关键代码，再此记录一下，看看我下次还会不会犯这么低级的错误 <a-form id="fo..
ant design vue自定义表单验证不生效和自定义校验内容有值后自动清除警告的方法
动感超人的博客
10-19 6618
从而如果有警告提示信息,尽管用户在之后输入了新值,也依旧会有报错,那么要怎么解决呢?有时候我们使用了自定义规则校验,无论是。
ant-design-vue的a-form-model表单，a-form-model-item项用v-if切换时，校验不生效问题
weixin_40992252的博客
11-09 823
原始代码确认校验代码。
antd 表单校验问题
lfalt的博客
06-28 738
情况 校验有时执行有时不执行，或者点击提交打印valid 没有执行。
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 a-form 无法校验自定义组件
jiaweiliao的博客
02-18 911
## 问题背景 项目中有一个需求，利用form表单校验表单内部值是否合法，当时需要校验一个自定义upload组件上传文件，按照官方文档的方式绑定对应的变量，校验官方input、select等组件都是能够成功的，但是校验自定义的upload组件却始终无法生效。当时使用版本为 "ant-design-vue": "^3.0.0-beta.7"。form表单无法主动校验自定义组件，需要由组件内部通知外部form表单进行校验。
ant表单校验页面值符合校验规则 但校验不通过
weixin_42478537的博客
07-14 3427
项目需求下拉选择框有全部核销和部分核销，要求全部核销时，将本金赋值给核销金额字段，且input灰显，选择部分核销时手工录入。之前尝试直接赋值，虽然页面上显示有值，但是组件并未拿到该值，导致校验规则不通过，且由全部核销切换为部分核销时还出现了输入框不能录入的问题。.........
Ant Design Vue Form表单验证后无法绑定数据的解决办法
baidu_36583119的博客
12-03 1808
v-model 与 v-decorator 是 冲突的，所以 v-decorator 无法双向绑定。 可以调用 ant的form组件的一个方法： // 它的作用是 修改表单元素 的值 this.form.setFieldsValue( {'name' : '吴桂鑫'} ); 调用该方法前，表单需要先渲染完毕，所以需要在外面加一层代码： this.$nextTick(()=>{ ...
vue elementUI组件表单动态验证失效的问题与解决办法
tyjlearning的博客
03-04 1668
一、缘由 在项目中，有一个需求是需要根据条件给表单项添加验证属性prop确定是否验证表项。 二、第一次实现与遇到的问题 比如银行卡号根据输入年龄进行判断，如果大于等于18岁才需要填入银行卡号。最先的想法先设置好el-form的rules，然后通过三元表达式赋值prop属性，实现动态验证，示例如下： <template> <el-form ref="ruleForm" :model="formData" :rules="rules"> <el-form-item ...
Ant vue中表单验证（动态校验、部分校验）
qq_32944491的博客
09-19 7828
1.多看官方文档；2.多写多总结，无论时动态校验还是普通校验——prop和绑定的值要保持一致，这样才能实现规则校验。！
antd Form 表单校验方法无响应
qq_36800820的博客
09-30 3751
antd 的 表单校验方法包括 validateFields 和 validateFieldsAndScroll 里面可以接收校验字段数组, options, 和一个回调函数 from.validateFields([name, age], {}, (err, val)=> {}) 校验全部表单数据 from.validateFields((err, val)=> {}) // 无响...
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、付费专栏及课程。

余额充值