antd表单校验不通过滚动条自动滚动到未通过校验位置

时间：2023-05-11 11:02:31浏览次数：34

标签：位置滚动通过校验表单滚动条 antd

问题：当一个存在滚动条的表单校验不通过时，需要自动滚动到不通过表单的位置

当滚动在最下面，不可视区域存在校验不通过，这时需要滚动条滚到未通过校验的表单位置

思路：定位到第一个不通过的表单项，然后通过scrollIntoView(),滚动到相应位置

表单在保存时会调用validate()方法校验表单，没有通过的会爆红有提示文字

爆红的提示文字都有一个class：'ant-form-explain',这时我们通过document.body.querySelector找到这个class，通过滚动scrollIntoView()就会跳到对应的位置

实现

标签：位置,滚动,通过,校验,表单,滚动条,antd
From： https://www.cnblogs.com/wang--chao/p/17390403.html

tkinter 鼠标滚轮控制滚动条滚动
defprocessWheel(event):globalvbar,canvas,stepifevent.delta>0:#滚轮往上滚动，放大canvas.yview_scroll(step,'units')else:canvas.yview_scroll(step,'units')#滚轮往下滚动，缩小......
AntDesign Blaozr标签页ReuseTabs的使用以及授权失败的坑
123<Authorized><ReuseTabsDraggableSize="TabSize.Small"/></Authorized><NotAuthorized>@{NavigationManager.NavigateTo("......
利用NewtonSoft.Json的JsonScheme校验数据格式
推送的报文信息，需要校验格式是否正确，必传的是否传了，字符串长度是否超长。之前是把报文反序列化为类后，一个字段一个字段进行校验。JsonSchema可以一次性校验校验对象的格式，如下：{"type":"object","properties":{"soId":{"type":"string",......
CRC 校验解析
CRC校验解析一个CRC校验模型需要包含以下信息：WIDTH，指CRC校验码的最终位数（二进制）POLY，指用来做二进制除法的多项式。INIT，指CRC的初始值。存在初始值是为了避免全0数据的校验码恒为0。若初始值不为0，则对于不同长度的全0数据，校验码一般也会不一样。XOROUT，指最后对......
elementUI 多层结构动态生成el-form及校验
如题，当整个el-form都是通过多层数据结构循环渲染出来的表单，那么每个el-form-item的prop和el-input、el-select等的v-model也是动态变量填充，怎么样才能内嵌rules校验呢？如下数据结构：//form通过initData数据结构进行渲染constinitData=[{channel:'sms',title......
vue3 路由页面返回时，恢复滚动条位置
首先，路由必须是KeepAlive模式<scriptsetuplang="ts">import{onActivated}from"vue";import{onBeforeRouteLeave}from"vue-router";import{ref}from"vue"constscrollRef=ref(<HTMLElement><unknow......
解决antd form表单校验错误时，设置scrollToFirstError 不能滚动到第一个校验错误位置
使用antdform表单自带属性scrollToFirstError校验不通过时自动滚动到第一个校验错误位置，但是经常没有效果，手动添加一个滚动方法来处理//表单滚动到第一个报错处（antd）exportconstscrollToFirstError=()=>{document.querySelector('.ant-form-item-has-error')?.scro......
el-scrollbar elementui 滚动条
参考：https://www.jb51.net/article/245065.htmel-scrollbar滚动条，文档中没有<el-scrollbarstyle="height:100%"><divclass="container">占位</div></el-scrollbar> ......
python Django校验表单登录案例
定义一个视图函数，用于处理登录表单的提交动作。在该视图函数中，使用request.POST.get()方法获取POST请求中提交的用户名和密码数据，具体代码如下：fromdjango.shortcutsimportrender,redirectfromdjango.contrib.authimportauthenticate,logindeflogin_view(requ......
react + antd table列表自动滚动
/***@file:table列表自动滚动，鼠标划入滚动暂停，鼠标划出滚动继续*/const[dataSource,setDataSource]=useState([])const[timer,setTimer]=useState()useEffect(()=>{if(dataSource.length){autoScroll(dataSource)}return()=>cl......

antd表单校验不通过滚动条自动滚动到未通过校验位置

问题：当一个存在滚动条的表单校验不通过时，需要自动滚动到不通过表单的位置

思路：定位到第一个不通过的表单项，然后通过scrollIntoView(),滚动到相应位置

实现

相关文章

赞助商

阅读排行

antd表单校验不通过 滚动条自动滚动到未通过校验位置

问题：当一个存在滚动条的表单校验不通过时，需要自动滚动到不通过表单的位置

思路：定位到第一个不通过的表单项，然后通过scrollIntoView(),滚动到相应位置

实现

相关文章

赞助商

阅读排行

antd表单校验不通过滚动条自动滚动到未通过校验位置