关于使用antd vue 表单组件的validateFields的注意点

已于 2022-04-28 09:28:53 修改
阅读量5.7k 收藏
点赞数 5
CC 4.0 BY-SA版权
分类专栏： 不懂就问系列 ant-design-vue问题记录 文章标签： 前端
于 2021-07-02 10:23:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Admin_yws/article/details/118406652
在JavaScript中，使用`validateFields`进行表单验证时，若`force:true`且出现错误，错误不会被捕获，导致后续代码无法正常执行。这个问题涉及到异步操作和错误处理机制。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

this.form.validateFields({ force: true }, (err, values) => {
//此处出现错误，不会被浏览器捕获（不会在控制台抛错），会导致出错代码后的正常代码无法正常执 行
});

antd vue表单验证_antd表单验证this.form.validateFields不能处理错误情况。
weixin_39850150的博客
12-20 6948
问题描述在vue框架内使用ant-design组件,页面内有一个表单，设定的表单规则比较简单，就是必填。但是即使什么都不输入，直接提交也可以输入内容也可以新增或修改成功。也就是表单的校验规则没有生效。问题出现的环境背景及自己尝试过哪些方法我猜测this.form.validateFields会自动处理错误情况，然后这项任务可能是比较底层的依赖去做的，ant-design文档页提到了async-va...
Vue 2.x折腾记 - (17) 基于Ant Design Vue 封装一个配置式的表单组件
CRPER
04-16 6998
前言 在写这个的时候，还是不信邪的用了vue jsx的风格去写东西， 当组件的东西多了起来之后，各种报错；没错，最终我又回归到传统的写法； 上一篇写了个搜索的封装，到写这个的时候发现有所可以优化的地方。 效果图 实现思路和功能 基础的功能直接配置上来渲染，而上传组件就不大合适了； 所以选择了slot来实现,如何保证传入的form-item的布局一致，则是拿slot-scope 我这边选型用的...
Ant Design Vue form表单validateFields无效果
qq_36126031的博客
02-18 5650
一、问题现象 Ant Design Vue的form组件，在点击提交时，无表单校验效果即无红字提示，但浏览器开发者工具（F12）有日志输出；逐个点击时，校验还都能触发，很奇怪。 二、解决方案 直接上才艺： 请仔细核对自己的表单检验中是否使用了自定义校验validator 使用排除法 即先将自定义校验全部注释掉，再次点击提交，此时应该是可以看到校验效果了，再将自定义校验逐一放开，并测试，即可将问题定位 三、反思 通过以上的定位检查后，应该就可以发现问题所在了，其实是自定义校验的代码出错了，但没有错
antd form validateFields的校验指定元素
热门推荐
MYG_G
10-29 5万+
参考文献：https://3x.ant.design/components/form-cn/#components-form-demo-validate-other antd form validateFields的校验指定元素 其实antd form validateFields有三种用法，用于不同的场景。 下图是antd关于validateFields的介绍。 1.校验form所有字段 这是最常用的写法，一般在提交表单的数据时候，大多数情况用这种写法，对于所有元素的正确性进行校验，只有全部通过校验才能
antd form表单验证validateFields 采坑记录
zhuangjiajia09的专栏
05-25 4511
使用form表单时，如果需要仅仅在前端对输入内容进行验证，可使用rules <a-form-item label="姓名" v-bind="formItemLayout"> <a-input class="required" placeholder="请输入" v-decorator="[ 'name', { rules: [
antd表单中的validateFields没有被执行可能的问题及解决
daihaoxin的专栏
05-14 1万+
文中所描述的问题及解决，适用于antd 3.x版本 今天在做一个修改密码的功能，逻辑极为简单，没有什么花头，然而在获取短信验证码的时候，如下代码中的form.validateFields的回调函数一直得不到执行，翻了两遍官方文档都没有找出问题。 onGetSMS = () => { const { form, sendSmsModifyPWD, sendEmailForResetPassword } = this.props; const { type } = this.state;
解决ant Design中this.props.form.validateFields未执行的问题
01-18
在使用ant Designd的 form 组件时发现点击提交方法中 this.props.form.validateFields((err, values) => {}) 部分未执行，也没有报错。 原因： 我使用了自定义校验 validator ，在自定义校验方法中有个错误，使用了...
antd vue表单结合hooks 封装
最新发布
04-23
结合 Ant Design Vue 表单组件使用 下面是一个完整的示例，展示如何在组件中使用该 Hook 并与 Ant Design Vue 的 `<a-form>` 和 `<a-input>` 等组件集成： ```vue 用户名"> 密码"> , span: 16 }">...
antd vue 表单循环校验
12-25
Ant Design Vue（简称antv-form）是一个基于Vue的表单组件库，它提供了一套丰富的表单控件和便捷的API来进行数据验证。对于需要循环校验的情况，比如在一个数组或对象中有多条数据需要同时验证，你可以通过动态生成...
antd vue 表单手动赋值不清空校验
03-14
好的，用户的问题是关于Ant Design Vue表单在手动赋值时如何保留校验状态，避免清除验证状态。我需要先理清楚Ant Design Vue的表单校验机制，然后找到正确的方法来设置值而不影响校验状态。 首先，用户提到手动赋值...
080910-vuePC端项目(题库列表 elemnet中对部分表单字段进行校验的方法validateField)
Tangoneone的博客
06-01 1380
题库列表 01-题库搜索ui渲染 搜索form表单部分 学科 1、去发请求获取所有的学科数据，存到subjectList：【】数组中 2、获取到数据之后，遍历数组 v-for="item in subjectList"得到每一个将其中的几个值设置给el-selectel-option的label、value、key 企业 1、去发请求获取所有企业的数据，存到 enterpriseList：【】数组中 2、获取到数据之后，遍历数组 v-for="item in enterpriseList"得到每一
使用Ant Design 4.x 表单提交时使用validateFields()方法校验多个表单的提交
weixin_45067896的博客
05-12 1999
在提交按钮的绑定的方法上使用Promise.all（[ a. validateFields() , b. validateFields() ,c.validateFields() ]）.then(res=>{就可以在执行表单提交的时候像验证一个表单一样去校验三个表单的值（比如校验字段是否必填），同时还可以同过getFieldsValue()方法拿到每个表单的值去执行想要操作。下面展示具体的使用代码。
vue+element局部表单验证validateField
03-27 9092
当想获取验证码的时候，需要验证邮箱格式是否正确，我们就需要用到“validateField“,附上部分代码：当校验不通过时emailError返回值为校验的提示信息，当通过时emailError的值为空，所以if语句中用(emailError）表示校验不通过，反之则通过 ...
关于AntDesign Vue中向form表单中通过getFieldDecorator()追加字段，经过form.validateFields()校验后追加的字段消失的问题
Mats的博客
09-06 1947
问题描述 当我们书写了这样的一段Ant Design Vue的form表单HTML代码： <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }"> <a-form-item label="用户名" hasFeedback> <a-input v-decorator="['lang', { rules: [ { require
antd form表单校验使用 validateFields
ximinglei的博客
05-18 1万+
我们在表单总会遇到必填项需要校验类似于 这样的 切换座机和电话就需要立即出发正则判断验证 但是切换的时候没有及时出发正则验证到时bug出现 因为正则时经过输入框判断来出发的 所以select 改变没有出发正则 所以需要antd里面的属性经过 你看到也很蒙不知道如何调用 因为调用会出发说有的校验但时候很尴尬 所以你需要只调用里面的一项 // 这是你ref名称 formRef.current.validateFields(['你要触发校验的名字']); 希望对你有帮助 避雷成功！！！ ...
Vue Ant Design validateFields不起作用
baixue0111的博客
07-15 6687
问题描述： 项目中使用校验方式是自定义校验规则，validateFields 方法不执行，不校验表单项， 然后看了仔细看官方文档 刚开始的理解是，每个函数体中需执行 一下 callBack() ，如图： 这样是不正确的，后来我在方法的最后一行也加了callBack() , 如图： 这样就可以了，所以，必须确保你代码执行的最后一行是 callBack() , 才可以。 ...
antd 上传组件 拖拽上传 form.validateFields()没有校验值
boy_hhx的博客
01-12 777
在用upload组件上传的时候，有两种方式，点击上传和拖拽上传，但是通过拖拽上传的没有校验的时候没有获取到值，所以就会提示没有上传，所以就在onChange事件里面。状态是done的时候，用form.setFieldsValue再次赋值就可以了。造成的原因可能是因为拖拽进来的，form表单上没有赋值。
antd validator ajax,antd中的validateFields返回的Promise中的values对象的key对应的value为undefined...
weixin_39983404的博客
08-06 1868
在form表单中，我想获取到一个input输入框的的name和其值，都是返回的值老是为undefined。代码如下formRef = React.createRef();name="category_form"className="category_form"ref={this.formRef} //创建ref>name="categoryName"rules={[{required: t...
【Antd】form.validateFields的.catch的errorFields为空数组但依然报错的原因及解决办法
hzxOnlineOk的博客
07-29 772
【代码】【Antd】form.validateFields的.catch的errorFields为空数组但依然报错的原因及解决办法。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值