vantUI表单校验失败，如何跳到校验失败的第一项？并且不被导航遮挡。antd框架有自带的api

原创已于 2022-06-15 11:58:31 修改 · 477 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js #前端 #vue.js

于 2022-04-20 17:53:53 首次发布

VUE 专栏收录该内容

3 篇文章

订阅专栏

这段代码用于处理当校验失败时，将焦点定位到失败元素上并平滑滚动到该元素的视口中心。通过`scrollIntoView`方法实现元素滚动，并使用`focus`方法设置焦点。


// dom为校验失败的那一项的元素
if (dom) {
		dom.scrollIntoView(false, {
			behavior: "smooth",
			block: "center",
			inline: "nearest"
		});
		dom.focus()
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

再吸一口居居

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

antd 表单提交，文件和表单内容一起提交，表单校验

a_靖的博客

12-19

7770

用很简单的源码实现包含下列 antd 表单相关知识： 1.表单必填校验，规则校验 2.Upload 上传图片，获取上传图片的状态，如上传成功，上传失败，上传进度条，删除上传的文件 3.获取 Input 组件用户输入的值，设置默认值 4.提交表单不刷新页面 5.把上传的图片显示在页面页面效果图：提交前提交后：包括校验失败的场景 t_form.jsx 代码： ...

vantUI 1.0版本官方没有表单检验自制简单表单校验

weixin_46356788的博客

03-26

410

在vant ui 微信小程序版1.0中是没有表单校验功能的但是实际项目中又需要实现表单检验的功能这时候就可以自制一个简单的表单校验。至于红色星号设置required即可。首先设置需要检验的内容。创建一个用来校验的方法。

参与评论您还未登录，请先登录后发表或查看评论

vant(ZanUi)结合async-validator实现表单验证的方法

10-17

主要介绍了vant(ZanUi)结合async-validator实现表单验证的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

Vue2，Vue3——Vant，Vant3自定义表单验证效果实现

热门推荐

NanChen的博客

01-27

1万+

官网上面有正则函数异步三种验证效果，但是并没有详细说明多个表单验证该如何实现，这里提一下首先要有form标签 <van-form @submit="onSubmit"> 这个标签包裹提交按钮 onSubmit(values) { console.log("submit", values); }, 之后在里面写input框 <van-field v-model="form.tel" type="tel"

vant3中提交表单且校验不通过时滚动至错误的表单项

W78955的博客

05-28

1097

vant3中提交表单且校验不通过时滚动至错误的表单项

VantUI(ZanUI)框架使用async-validator进行表单数据校验

GZL的博客

10-10

2693

前端UI框架与async-validator介绍 VantUI是一款有赞出品的基于Vue的前端手机端开发框架 ElementUI和MintUI是两款饿了么公司出品的基于Vue的UI框架, ElementUI适用于电脑端, MintUI适用于手机端 async-validator是一款基于js的异步数据校验插件(当前github上已有117k个仓库使用了async-validator) asy...

精选资源

解决antd Form 表单校验方法无响应的问题

01-18

antd 的表单校验方法包括 validateFields 和 validateFieldsAndScroll 里面可以接收校验字段数组, options, 和一个回调函数 from.validateFields([name, age], {}, (err, val)=> {}) 校验全部表单数据 from....

elementui 和vantUi表单validate区别

ss_Tina的博客

11-02

679

测试elementui 和vantUi表单自动触发验证区别。 elementui表单如果有添加校验，将button设置native-type="submit"并不会触发表单的自动验证而vantui会自动触发，不需要手动写this.$refs.form.validate。

antd 2.2.8 版本 Form表单使用useForm带星号校验和带星号不校验的写法以及不带星号不校验的写法

agua001的博客

04-11

5315

antd 2.2.8 版本 Form表单使用useForm带星号校验和带星号不校验的写法以及不带星号不校验的写法

elementUI表单校验失败自动聚焦到失败input/select等输入框

li22356的博客

02-11

507

以上就是解决elementUI表单校验自动聚焦到失败的输入框问题解决方案。如有侵权，请联系本人删除。

在Vant的基础上实现添加表单验证框架的方法示例

10-17

主要介绍了在Vant的基础上实现添加验证框架的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

element 表单验证失败，滚动到第一个错误的地方

qwyio的博客

03-17

870

scrollIntoView() 说明：调用它的元素滚动到浏览器窗口的可见区域。 this.$refs["form"].validate((valid) => { if (valid) { return; } else { this.$nextTick(() => { let isError = document.getElementsByClassName("is-error"); i

element-ui表单校验失败后滚动到第一个校验失败的地方

皮卡丘

07-06

662

1、点击确定按钮 elementUI校验失败的时候自带的class：is-error；

vue element ui表单验证不通过，滚动到页面上第一个验证失败的输入框位置

HeMister的博客

04-17

2913

this.$refs['refName'].validate((valid, object) => { if (valid) { // valid Boolean true||false // 正常处理 } else { this.scrollView(object) } }) // 滚动到固定地方 scrollView(object) { for (const i ...

表单验证——点击提交后跳转到第一个未通过校验的地方

xn的博客

07-29

885

表单验证——点击提交后跳转到第一个未通过校验的地方 submitForm(formName) { this.$refs[formName].validate(valid => { if (valid) { alert("提交成功！"); } else { setTimeout(() => { var isError = document.getElementsByClassName("is-err

【Antdv】表单校验失败时将页面滚动到错误消息所在位置

Owen的博客

05-30

1195

遇见超长表单，提交校验失败，我们希望页面可以滚动到第一个错误消息的所在位置。是一个 DOM 方法，它使得元素滚动到可视区域内。通过选择器字符串匹配文档中的元素，并。

element form表单验证页面回到第一个验证错误的位置

tq1711的博客

12-24

1228

formErrorScroll () { // 报错回到第一个错误的地方 if (document.querySelector(’.el-form-item__error’)) { document .querySelector(’.el-form-item__error’) .parentNode.scrollIntoView({ block: ‘start’, behavior: ‘smooth’ }) } }

利用Vant ui 中 form 表单组件，实现通过一个按钮校验多个表单

qq_50721840的博客

03-21

1777

多个表单校验

vant2.10.0以下版本的表单验证规则rules报错后无法重置表单状态的问题

qq_43650979的博客

08-12

3995

问题描述使用vant的vant-field组件来实现输入框，此项为必填项，所以需要加:rules="[{required: true }]" <van-field v-model="companyID" type="text" name="companyID" size="large" label="企业ID" placeholder="请输入企业ID" :rules="[{required:

antd表单校验某一项

最新发布

05-29

<think>好的，我现在需要帮助用户解决关于AntDesign表单校验某一特定项的实现方法或示例的问题。首先，我要回忆一下用户之前提到的引用内容，确保回答符合他们的需求。用户提供的引用[1]和[2]都是关于Ant Design表单自定义校验规则的例子。引用[1]展示了使用validator函数来验证复选框是否被选中，而引用[2]则演示了两种方法：一种是直接在rules中使用pattern正则表达式，另一种是通过validator函数进行更复杂的验证。用户现在想了解如何针对特定表单项进行校验，可能需要具体的实现步骤和示例代码。首先，我应该分步骤说明不同的校验方法。Ant Design的表单校验主要依赖于Form.Item的rules属性，所以需要介绍如何在该属性中配置规则。常见的方法包括使用内置规则如required、pattern，以及自定义validator函数。用户可能需要知道这些方法的具体应用场景和写法。接下来，我需要给出每种方法的示例代码。例如，内置规则的例子可能包括必填校验和正则表达式校验，而自定义校验函数则可以处理更复杂的逻辑，比如依赖其他字段的值或异步校验。要确保代码示例正确，并符合用户提供的引用中的结构，比如使用validator时返回Promise.resolve或reject。另外，用户可能对如何组合多种规则感兴趣，比如同时使用必填和正则校验。需要说明在rules数组中添加多个规则对象即可实现。同时，可能需要提醒用户关于自定义校验函数中的参数使用，如rule和value，以及如何处理错误消息。还需要注意用户提到的中文回答要求，所以所有的解释和注释都要用中文。同时，确保LaTeX格式正确，但在当前问题中可能涉及较少数学公式，但如果有需要，比如正则表达式中的模式，可能需要用行内代码块而非LaTeX。最后，生成相关问题，帮助用户进一步探索。例如，如何动态校验、异步校验或联动校验，这些都是用户可能在后续开发中遇到的问题。总结一下，回答的结构应该是：先概述，然后分点讲解不同方法，每种方法附上示例代码，最后给出相关问题。确保引用正确的示例，并参考用户提供的代码结构，避免错误。</think>### Ant Design表单特定项校验实现方法 Ant Design表单通过`Form.Item`的`rules`属性实现单项校验，以下是三种常用方法： #### 一、内置规则校验 1. **必填校验** ```jsx <Form.Item name="username" rules={[{ required: true, message: '请输入用户名' }]} > <Input /> </Form.Item> ``` 2. **正则校验** 使用`pattern`匹配邮箱格式： ```jsx <Form.Item name="email" rules={[ { pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, message: '邮箱格式错误' } ]} > <Input /> </Form.Item> ``` #### 二、自定义校验函数通过`validator`实现复杂逻辑，如密码强度验证： ```jsx <Form.Item name="password" rules={[ { validator: (rule, value) => { if (!/(?=.*[A-Z])(?=.*[0-9])/.test(value)) { return Promise.reject('需包含大写字母和数字'); } return Promise.resolve(); } } ]} > <Input.Password /> </Form.Item> ``` #### 三、混合规则校验同时使用多规则： ```jsx <Form.Item name="phone" rules={[ { required: true, message: '手机号必填' }, { pattern: /^1[3-9]\d{9}$/, message: '非有效手机号' } ]} > <Input /> </Form.Item> ``` #### 四、跨字段校验验证两次输入是否一致： ```jsx <Form.Item name="confirmPassword" dependencies={['password']} // 依赖password字段 rules={[ ({ getFieldValue }) => ({ validator(rule, value) { if (value !== getFieldValue('password')) { return Promise.reject('两次输入不一致'); } return Promise.resolve(); } }) ]} > <Input.Password /> </Form.Item> ``` [^1][^2]

vantUI表单校验失败，如何跳到 校验失败的第一项？并且不被导航遮挡。antd框架有自带的api

vantUI表单校验失败，如何跳到校验失败的第一项？并且不被导航遮挡。antd框架有自带的api