React 实战 | antd form表单验证，同时支持onBlur与onChange事件验证

最新推荐文章于 2024-02-16 17:42:45 发布
VIP文章 最新推荐文章于 2024-02-16 17:42:45 发布
阅读量1.6w 收藏 8
点赞数 1
分类专栏： React 文章标签： Antd
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35536883/article/details/99675818
版权

通常使用ant design的表单验证时，我们直接在getFieldDecorator中使用rules来定义校验规则，默认的触发校验规则则的事件validateTrigger为onChange，也就是说，触发onblur事件时不会校验其中的规则。

 <FormItem {
   ...formItemLayout} label="文章标题">
	  {
   getFieldDecorator('title', {
   
	    rules: [{
   
	      required: true,
	      message: '请输入标题',
	    }]
最低0.47元/天 解锁文章
辣爷
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
antd form表单数据回显操作
01-22
index页面有一个表格，有一个新增按钮，点击新增按钮或表格编辑弹出表单模块，如果是编辑，会回显对应的表格中的数据 //index页面 import React from 'react' import { Table, Button, message, Input, Select, ...
react条件渲染input失焦问题
m0_56325569的博客
06-29 191
使用useRef解决此问题可能会出现输入法使用不了的问题，可以把在input上面绑定的onChange事件换成onBlur事件就可解决失焦问题。
解决blur与click冲突
热门推荐
李刚的学习专栏
06-26 3万+
在开发中我们会经常遇到blur和click冲突的情况。下面叙述了开发中常遇到的“下拉框”的问题，并提供了两种解决方案。一、blur和click事件简述 blur事件：当元素失去焦点时触发blur事件；其为表单事件，blur和focus事件不会冒泡，其他表单事件都可以。 click事件：当点击元素时触发click事件；所有元素都有此事件，会产生冒泡。 示例1：blur事件为表单事件<input typ
JavaScript中的onblur（失去焦点）应用
最新发布
qiuqiule6的博客
02-16 1123
提示：onblur 相反事件为 onfocus 事件。ondblclick— 鼠标左键双击事件。onmouseover— 鼠标移入事件。onmouseout-- 鼠标移出事件。onmousemove— 鼠标移动事件。onmousedown— 鼠标按下事件。oninput---- 内容改变事件。onclick— 鼠标左键单击事件。onmouseup— 鼠标抬起事件。onkeydown— 键盘按下事件。onchange— 内容改变事件。onkeyup— 键盘抬起事件。onblur— 失去焦点事件。
关与react 重新渲染的问题
zw19940808的博客
11-26 1368
业务场景：列表中存在两个输入框， 一个下拉框，和一个switch， 项目基于umi2搭建，列表数据存于model，给switch和input 分别绑定了onClick 和onChange 事件，他们都会执行onChangeData这个修改数据的方法，每次都会 dispatch({ type: `${namespace}/updateStore`, payload: { tableDataSource, }, }); 更新model中的数据...
06_react中的事件处理
qq_46431018的博客
08-04 136
react的事件处理
Ant Design在日常开发中的使用，这里都有
军火库
05-19 5331
antd的表单组件基本用法 官网ant.design/index-cn 按需导入组件 import { Form, Input, Button, Checkbox } from 'antd' <Form validateTrigger={['onBlur', 'onChange']}> <Form.Item name="mobile" rules={[ { pattern: /^1[3-9]\d{9}$/, message
解决antd Form的onChange方法改变的值与getFieldsValue获取的值不同步的问题
qq_45174403的博客
09-01 911
antd的Form表单在onChange时更新的数据和用getFieldsValue获取的数据不一致
Antd中Form表单的onChange事件中执行setFieldsValue不生效
spicyboiledfish的博客
08-25 1万+
如果在Form表单中onChange事件中，手写了一个setFieldsValue, 则不会生效。原因是因为：Form表单会在手写的onChange事件之后执行内部的setFieldsValue，所以会将我们之前手写的setFieldsValue给覆盖掉。解决方案： 1. 使用setTimeout延时。此方案不推荐 2. 使用getValueFromEvent. 是当onChange的时候，更改form表单的值的情景下使用 <FormItem label="路由节点" {...nodelayo
react ant-desian实现表单校验
总结前端开发中遇到的问题，分享前端知识
06-11 1490
为 Form 组件添加validateTrigger属性，指定校验触发时机的集合
Antd Form 表单实现单项自定义请求校验
small_white_123的博客
11-08 4348
Antd Form 表单实现单项自定义请求校验，与 Modal 相结合，实现用户在输入信息后立即对 其进行校验的。
react使用antd表单赋值,用于修改弹框的操作
01-18
补充知识：react中使用antd的表单重置数据 resetFields 重置一组输入控件的值（为 initialValue）与状态，如不传入参数，则重置所有组件 Function([names: string[]]) 注：initialValue有值时会
解决antd 表单设置默认值initialValue后验证失效的问题
01-21
Form.Item> { getFieldDecorator('userName', { initialValue: 'Tom' },{ rules: [{ required: true, message: '请输入用户名', }], })( <Input placeholder='\u8bf7\u8f93\u5165\u7528\u6237\u540d'/&...
react-form:用于表单验证的react组件
05-04
react-form 用于表单验证的react组件
在react-antd中弹出层form内容传递给父组件的操作
01-21
import { Form, Input} from 'antd'; const FormItem = Form.Item; class Forms extends Component{ getItemsValue = ()=>{ //3、自定义方法，用来传递数据（需要在父组件中调用获取数据） const values= this....
React实战 | JSON数据展示组件react-json-view的安装与使用
qq_35536883的博客
08-08 1万+
最近项目中新增了一个功能：格式化及高亮展示JSON数据。 查找发现了react-json-view，简直太方便了。 react-json-view（RJV）是一个用于显示和编辑javascript数组和JSON对象的React组件。 使用起来也很简单： // import the react-json-view component // 在需要的组件引入react-json-view组件 impo...
React实战 | JSX的空格与换行不显示问题的解决方案
qq_35536883的博客
08-07 1万+
空格显示不正常 这是因为浏览器显示机制，会将连续多个空格显示成1个空格。 在这些示例中，HTML和JSX中的空格是一样的 <div>Hello•World</div> <div>•Hello•World</div> <div>••Hello•World</div> <div>•••Hello•World•••&lt...
React 实战 | react map循环，报警告Expected to return a value in arrow function
qq_35536883的博客
07-16 8633
map循环，报警告Expected to return a value in arrow function 意思是缺少return返回值 解决方案： 使用forEach代替map，因为ESlint报这个警告是因为map, filter , reduce 需要返回值 也可以使用map,在react中用jsx的方式，直接把{}改成() ...
react antd form表单点击确定时可以自动定位未填项
06-08
可以实现自动定位未填项的功能，具体实现方式如下： 1. 首先，在表单中添加一个 ref 属性，用于获取表单的实例。 2. 在表单提交的回调函数中，通过表单实例的 getFieldsError() 方法获取所有未填项的错误信息。 3. 如果存在未填项的错误信息，则遍历所有表单项，通过 getFieldDecorator() 方法获取表单项的装饰器，并调用装饰器的 validateFields() 方法，触发表单项的校验。 4. 在校验完成后，通过表单实例的 getFieldInstance() 方法获取表单项的实例，并调用其 focus() 方法，使其获得焦点。 5. 最后，将表单滚动到未填项所在的位置，使用户能够看到未填项。 以下是代码实现的示例： ```javascript import React, { Component } from 'react'; import { Form, Input, Button } from 'antd'; class MyForm extends Component { formRef = React.createRef(); handleSubmit = e => { e.preventDefault(); this.formRef.current.validateFields((errors, values) => { if (errors) { const fieldsError = this.formRef.current.getFieldsError(); const firstErrorField = Object.keys(fieldsError).find(field => fieldsError[field]); const firstErrorNode = this.formRef.current.getFieldInstance(firstErrorField); firstErrorNode.focus(); const formNode = this.formRef.current.getFormNode(); formNode.scrollTo({ top: firstErrorNode.offsetTop - formNode.offsetTop, behavior: 'smooth' }); } // 如果校验通过，则可以在这里提交表单数据 }); }; render() { return ( <Form ref={this.formRef} onSubmit={this.handleSubmit}> <Form.Item label="姓名" name="name" rules={[ { required: true, message: '请输入姓名' } ]} > <Input /> </Form.Item> <Form.Item label="年龄" name="age" rules={[ { required: true, message: '请输入年龄' } ]} > <Input /> </Form.Item> <Form.Item> <Button htmlType="submit">提交</Button> </Form.Item> </Form> ); } } export default MyForm; ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值