Ant Design Vue form表单validateFields无效果

最新推荐文章于 2024-07-12 14:59:05 发布
最新推荐文章于 2024-07-12 14:59:05 发布
阅读量4.7k 收藏
点赞数 2
分类专栏： 项目杂记 文章标签： javascript html 前端 chrome
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36126031/article/details/113842902
版权

一、问题现象

Ant Design Vue的form组件，在点击提交时，无表单校验效果即无红字提示，但浏览器开发者工具（F12）有日志输出；逐个点击时，校验还都能触发，很奇怪。

在这里插入图片描述

二、解决方案

直接上才艺：
请仔细核对自己的表单检验中是否使用了自定义校验validator
使用排除法
即先将自定义校验全部注释掉，再次点击提交，此时应该是可以看到校验效果了，再将自定义校验逐一放开，并测试，即可将问题定位

三、反思

通过以上的定位检查后，应该就可以发现问题所在了，其实是自定义校验的代码出错了，但没有错误提示，导致我们无法第一时间发现问题所在
仔细反思后，其实还是自己的代码写的不够健壮，我自己的问题是没有考虑字符串、数组为undefind(第一次什么都不填，直接提交此时的值均为undefind)的情况，应该给个默认值空，这样就不会出错了

What are you 弄啥勒？
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
antd vue表单验证_antd表单验证this.form.validateFields不能处理错误情况。
weixin_39850150的博客
12-20 6732
问题描述在vue框架内使用ant-design组件,页面内有一个表单，设定的表单规则比较简单，就是必填。但是即使什么都不输入，直接提交也可以输入内容也可以新增或修改成功。也就是表单的校验规则没有生效。问题出现的环境背景及自己尝试过哪些方法我猜测this.form.validateFields会自动处理错误情况，然后这项任务可能是比较底层的依赖去做的，ant-design文档页提到了async-va...
Ant Design Vue 添加区分中英文的长度校验功能
10-15
Ant Design Vue是一个基于Ant Design和Vue的UI组件库，它为开发者提供了丰富的表单组件和内置验证规则，但在某些特定场景下，内置的规则可能不满足所有需求，此时我们可以通过扩展或自定义校验规则来实现特定的功能...
解决antd Form 表单校验方法无响应的问题
01-18
antd 的 表单校验方法包括 validateFields 和 validateFieldsAndScroll 里面可以接收校验字段数组, options, 和一个回调函数 from.validateFields([name, age], {}, (err, val)=> {}) 校验全部表单数据 from.validateFields((err, val)=> {}) // 无响应 发现无响应, 无报错, 完全蒙逼了, 排查良久, 添加校验字段后发现可以成功校验, 于是想着大不了我全部手动添加字段名校验, 终于, 错误的原因浮现出来了 from.validateFields([n
表单校验validate、validateField通过时不执行相关代码问题，只有校验不通过才执行
前端小白的逆袭
10-12 2353
表单校验validate、validateField通过时不执行相关代码问题，只有校验不通过才执行
如何在Vue 3中进行表单验证？
最新发布
有我更精彩的博客
07-12 247
表单验证是前端开发中一个重要的功能，确保用户输入的信息合乎预期。在Vue 3中，可以使用多种方式实现表单验证，如手动验证、vue-validators、VeeValidate等。本篇博客将介绍如何使用VeeValidate（Vue 3社区推荐的表单验证库）来进行表单验证。
Vue Ant Design validateFields不起作用
baixue0111的博客
07-15 6456
问题描述： 项目中使用校验方式是自定义校验规则，validateFields 方法不执行，不校验表单项， 然后看了仔细看官方文档 刚开始的理解是，每个函数体中需执行 一下 callBack() ，如图： 这样是不正确的，后来我在方法的最后一行也加了callBack() , 如图： 这样就可以了，所以，必须确保你代码执行的最后一行是 callBack() , 才可以。 ...
antd表单中的validateFields没有被执行可能的问题及解决
热门推荐
daihaoxin的专栏
05-14 1万+
文中所描述的问题及解决，适用于antd 3.x版本 今天在做一个修改密码的功能，逻辑极为简单，没有什么花头，然而在获取短信验证码的时候，如下代码中的form.validateFields的回调函数一直得不到执行，翻了两遍官方文档都没有找出问题。 onGetSMS = () => { const { form, sendSmsModifyPWD, sendEmailForResetPassword } = this.props; const { type } = this.state;
【vue】form表单提交validate验证不进valid原因
qq_33225414的博客
06-20 466
3.中要写成:model，不能使用v-model。4.自定义的validate要各个路径均能返回callback()。1.是否写了ref=“form”。2.是否有其它标签写了ref=“form”。
Vue+Antd表单校验form.validateFields执行错误的解决方法
碎碎念的安静的博客
03-16 1万+
以下是一段手机号的的自定义校验，在提交表单的时候form.validateFields总是出现错误，方法无法向下执行 //自定义校验（检查手机号是否输入正确） checkPhone(rule, value, callback) { if (value != null && value != "") { var reg = /^1[3456789]\d{9}$/; ...
解决ant Design中this.props.form.validateFields未执行的问题
01-18
在使用ant Designd的 form 组件时发现点击提交方法中 this.props.form.validateFields((err, values) => {}) 部分未执行，也没有报错。 原因： 我使用了自定义校验 validator ，在自定义校验方法中有个错误，使用了...
Ant design vue 的组件禁用属性 disabled.pdf
12-16
在Ant Design Vue这一流行的前端UI库中，`disabled`属性是一个关键特性，它允许开发者禁用用户对特定组件的操作，从而实现对用户交互的控制。禁用状态通常用于表示组件处于不可操作或非活动状态，这在许多场景下都是...
ant-design-vue 实现表格内部字段验证功能
10-15
ant-design-vue是一套基于Ant Design和Vue的组件库，提供了包括表格（a-table）、表单（a-form）、表单项（a-form-item）等多个现成的UI组件。这些组件通常会搭配对应的JavaScript API和属性来进行配置，以满足业务...
Vue form表单动态添加组件实战案例
10-16
在Vue.js应用中，表单动态添加组件是一个常见的需求，特别是在构建可扩展和灵活的用户界面时。Vue的`v-for`指令是实现这一功能的关键。在这个实战案例中，我们将探讨如何利用Vue来动态地在表单中添加和移除组件，...
Ant Design validateFields不起作用
weixin_44780381的博客
04-14 1051
Ant Design validateFields不起作用 问题描述： 项目中使用校验方式是自定义校验规则，validateFields 方法不执行，不校验表单项， 然后看了仔细看官方文档 刚开始的理解是，每个函数体中需执行 一下 callBack() ，如图： 这样是不正确的，后来我在方法的最后一行也加了callBack() , 如图： 这样就可以了，所以，必须确保你代码执行的最后一行是 callBack() , 才可以 ———————————————— 版权声明：本文为CSDN博主「一张白纸雪」的原创文
【Vue3 + ElementUI】表单校验无效（写法：this.$refs[‘formName‘].validate((valid) =＞{} )）
weixin_47375144的博客
04-09 1682
el-form 中 校验 ，校验无效
el-form自定义规则后表单验证validate不生效的问题
weixin_61570458的博客
09-21 3168
错误示范
el-form resetFields无效和validate无效的可能原因及解决方法
我家有只小金毛的博客
04-17 6426
el-form resetFields无效和validate无效的可能原因及解决方法问题导入简单实例1、官方案例resetFields 失败可能原因2、个人案例resetFields失效及解决办法先添加后编辑先编辑后添加validate失效及解决办法结尾 问题导入 在使用 el-form 过程中，尤其是表单验证这一块，官方提供的 reserFields 方法以及验证方面存在一些坑，在此记录一下，给大家提供可能的解决办法。 简单实例 1、官方案例 先来看看官方提供的案例，对应的官网 表单验证 对应的代码 &
ant design vue 表单域的validateFields取值和子item的change取值的先后问题
PC_136的博客
09-21 9234
废话不多，先咔的撸出代码先 我先在created中初始化表单域form 然后在表单域子节点中绑定@change="handleChange"函数， 然后我设想是每一次单选完后打印出单选后的值 然而结果是每次打印的值是单选前的值，比如： 我开始时默认选正常，第一次选异常，打印出正常 第二次选正常，结果打印出异常 我懵逼了，一般出现这种情况应该是跟事件机制同步或者异步的...
ant form动态字段 表单校验页面不标红
h5杂记
08-03 1319
问题如下 动态的设置form的值 点击保存时应该校验必选字段， 页面未标红提示， 但是控制台已经打印了错误如图2 期望正确的校验 图3 解决 定义 :selfUpdate=“true” 自定义字段更新逻辑，你可以通过 Form 的 selfUpdate 进行统一设置。当和 Form 同时设置时，以 Item 为准。 需 1.3.17 版本以上 ...
在ant design vue form表单中的input上动态设置defaultValue
05-13
在Ant Design Vue的表单中，可以使用`defaultValue`属性来设置输入框的默认值。如果你想要动态地设置这个属性，可以通过以下两种方法实现： 1. 使用`v-model`绑定表单数据，并在数据更新时设置`defaultValue`属性。...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值