快速定位到ant-design form表单校验未通过的item

最新推荐文章于 2025-01-08 14:36:42 发布
原创 最新推荐文章于 2025-01-08 14:36:42 发布 · 896 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #前端 #开发语言

在长表单提交时，如果校验未通过，文章提供了一种解决方案，即通过定位并滚动到第一个带有has-error类的表单项，使用户能清晰看到错误。代码示例展示了如何在验证失败时调用scrollIntoView方法，以及在大型项目中如何优化此功能，考虑了keep-alive和弹框表单的情况。

快速定位到ant-design form表单校验未通过的item

需求背景

在项目开发中，我们经常遇见长长的表单，长到表单写花眼的那种，一屏放不下，滚动条还得往下滚动几下。

当我们提交表单的时候，有的表单项校验未通过，且这个表单项未可视区域，这就会给用户造成一定的困扰，认为提交按钮点击没有反应或者认为系统做的不够人性化。于是就引申出下面的需求，点击提交按钮，未校验通过的表单项如果不在可视区域就滚动到可视区域

实现方式

但我们提交表单时，如果检验未通过，这未通过的表单项就会增加一个固定的class类，对该表单项进行标红高亮并显示错误提示语。

我们根据这个规则，找到表单校验未通过的项，然后选定第一个高亮的项，将页面视图滚动到该项处，即可解决这个问题；

代码如下：

submitForm() {
   
   
  this.$refs.form.validate((
最低0.47元/天 解锁文章
ant-design-vue Table+Form表单实现表格内置表单验证，可自定义验证规则，触发必填项
m0_57071129的博客
04-18 2251
【代码】ant-design-vue Table+Form表单实现表格内置表单验证，可自定义验证规则，触发必填项。
antd-form表单定位到第一个校验失败的地方
Maha
09-07 2956
antd-form
ant design Form必填校验失败自动滚动到第一条 scrollToFirstError scrollIntoView
muge1161105403的博客
05-31 6080
老规矩，话不多说，直接上实现方式 注意：本帅用的版本 “antd”: “4.16.13”, 前提代码如下 const generateUUID = () => { let d = new Date().getTime(); const uuid = 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx'.replace(/[xy]/g, (c: any) => { const r = (d + Math.random() * 16) % 16 | 0;
Ant Design vue 版本为1.7.2 表单校验的规则
qq_25972233的博客
11-04 1149
Ant Design vue2 中 表单的校验规则的使用
antd表单验证，自动跳转到未填写的位置
Onelizi的博客
05-30 1546
antd表单验证，自动跳转到未填写的位置
表单提交报错自动定位（antd+vue）
零凌林的博客
08-29 1187
本文主要针对表单多项必填项未填写或者未通过校验，提交时则自动定位至第一项（附完整代码，项目中有taiwindcss的可直接复制使用）
ant-design-vue3.x的form表单爬坑.pdf
12-16
总之，尽管Ant Design Vue 3.x引入了新的表单处理方式，但通过理解和适应这些变化，开发者可以充分利用其强大的表单管理能力，为用户创建更加高效、可维护的前端应用。在升级过程中，遇到问题时不要害怕“爬坑”，...
精选资源
ant-design表单处理和常用方法及自定义验证操作
01-22
首先要说一下antdesign这个框架API和...我们可以copy一个Form表单的demo。 LoginForm是表单的组件，下面代码，是React 高阶组件（Hoc）。 用于使组件获取 this.props.form 下面介绍一些常用的 this.props.form的方法。
ant-design-vue 实现表格内部字段验证功能
10-15
ant-design-vue是一套基于Ant Design和Vue的组件库，提供了包括表格（a-table）、表单（a-form）、表单项（a-form-item）等多个现成的UI组件。这些组件通常会搭配对应的JavaScript API和属性来进行配置，以满足业务...
ant design vue自定义表单验证不生效和自定义校验内容有值后自动清除警告的方法
动感超人的博客
10-19 8362
从而如果有警告提示信息,尽管用户在之后输入了新值,也依旧会有报错,那么要怎么解决呢?有时候我们使用了自定义规则校验,无论是。
【Antdv】表单校验失败时将页面滚动到错误消息所在位置
Owen的博客
05-30 1192
遇见超长表单，提交校验失败，我们希望页面可以滚动到第一个错误消息的所在位置。是一个 DOM 方法，它使得元素滚动到可视区域内。通过选择器字符串匹配文档中的元素，并。
ant表单校验页面值符合校验规则 但校验不通过
weixin_42478537的博客
07-14 4116
项目需求下拉选择框有全部核销和部分核销，要求全部核销时，将本金赋值给核销金额字段，且input灰显，选择部分核销时手工录入。之前尝试直接赋值，虽然页面上显示有值，但是组件并未拿到该值，导致校验规则不通过，且由全部核销切换为部分核销时还出现了输入框不能录入的问题。.........
antdesign面板自动滑动到未填项
qq_44812872的博客
04-13 311
【代码】antdesign面板自动滑动到未填项。
ant-design-vue 表单报错位置提示
qq_38942507的博客
07-05 524
ant-design-vue表单报错位置定位
Ant-design-vue form 表单错误提示出现后会使原格局样式发生偏移
ljjpaopao的博客
08-28 1089
解决ant desgin vue表单错误提示出现导致偏移的问题
Ant Design Vue表单校验报错
最新发布
FF_XM的博客
01-08 507
【代码】Ant Design Vue表单校验报错。
使用antd的上传组件做上传附件数据校验踩坑
濮家大少
11-26 1149
使用antd的上传组件做上传附件数据校验踩坑
Ant Design Vue的Form表单验证
Teddy____的博客
11-11 3542
简单的Ant Design Vue的Form表单验证
Ant-Design-Pro中：EditableProTable在ProForm保存时一并验证EditableProTable中每条数据的规则是否满足
Iversons.Tian的博客
04-28 7198
注：EditableProTable默认是在单行保存时调用表单验证，如下图： 现在项目有个需求：是点击EditableProTable外部的保存按钮对整个表单进行验证，实现效果如下： 思路如下： EditableProTable提供了editable属性，可以设置form属性：官网地址 实现代码如下，复制可直接运行）： import React, { useState, } from 'react'; import { FooterToolbar, } from '@ant-desi
ant-design-vueForm表单自定义校验规则
07-20
在 ant-design-vue 中，可以通过自定义校验规来进行表单的验。下面是一个简单的示例： 1. 首先，你需要在你的表单组件中引入 `Form` 和 `FormItem` 组件： ```vue <template> <a-form :form="form"> <a-form-item label="用户名" :colon="false" :validateStatus="getValidateStatus('username')" :help="getHelp('username')"> <a-input v-decorator="['username', { rules: [{ validator: validateUsername }] }]"></a-input> </a-form-item> <a-form-item> <a-button type="primary" @click="submit">提交</a-button> </a-form-item> </a-form> </template> <script> import { FormModel, Input, Button } from 'ant-design-vue'; export default { components: { 'a-form': FormModel, 'a-form-item': FormModel.Item, 'a-input': Input, 'a-button': Button, }, data() { return { form: this.$form.createForm(this), }; }, methods: { validateUsername(rule, value, callback) { // 自定义校验规则 if (value && value.length < 5) { callback(new Error('用户名长度不能小于5个字符')); } else { callback(); } }, getValidateStatus(name) { const { getFieldError, isFieldValidating } = this.form; if (isFieldValidating(name)) { return 'validating'; } else if (getFieldError(name)) { return 'error'; } else { return ''; } }, getHelp(name) { const { getFieldError } = this.form; return getFieldError(name) || ''; }, submit() { this.form.validateFields((err, values) => { if (!err) { console.log('校验通过', values); } }); }, }, }; </script> ``` 在上述示例中，我们定义了一个表单，其中的用户名字段使用了自定义的校验规则 `validateUsername`。在 `validateUsername` 方法中，我们可以自定义校验逻辑，并通过 `callback` 返回校验结果。当校验不通过时，`callback` 的参数为一个 `Error` 对象，可以指定错误信息。在 `a-form-item` 组件中，我们使用了 `:validateStatus` 和 `:help` 属性来显示校验状态和错误信息。 注意：在以上示例中，我们使用了 ant-design-vue 的 FormModel、Input 和 Button 组件，请确保已经正确引入这些组件。 这就是在 ant-design-vue 中使用自定义校验规则的方法，你可以根据自己的需求进行相应的定制。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

绝对零度HCL

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值