React-antd-Form自定义正则校验

最新推荐文章于 2024-09-07 16:58:23 发布

救护用的垃圾车

最新推荐文章于 2024-09-07 16:58:23 发布

阅读量1w

点赞数 2

分类专栏： React Ant Design

本文链接：https://blog.csdn.net/DeepHugY/article/details/94391319

版权

本文介绍了如何在React应用中利用Ant Design（antd）的Form组件进行自定义正则验证。通过示例代码展示了在antd form中设置正则规则以确保输入数据的正确性。

摘要由CSDN通过智能技术生成

今天发现antd 的form校验还是很好用的，既支持使用已有的校验格式，又可以自定义正则校验，甚至还能灵活地自定义校验方法，这次主要是用到正则校验，以下是关键代码：

                <Form.Item
                  label="名称"
                >
                  {
   form.getFieldDecorator('name', {
   
                    rules: [
                      {
    required

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

救护用的垃圾车

关注关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

【React工作记录十八】常见的正则校验

geyaoisnice的博客

12-26

1543

目录前言导语代码部分总结前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19 叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷导语歌谣歌谣这部分邮箱电话号码等需要加个校验你快操作操作代码部分 // 手机号 const isPhone = /^1[3-9]\d{9}$/; // const isPhone = /(...

vue ant design 正则匹配中文校验 [\u4e00-\u9fa5]

sunshineTing2的博客

01-22

1277

// 自定义校验方法，输入框不能输入汉字 const checkData = (rule, value, callback) => { if (value) { if (/[\u4E00-\u9FA5]/g.test(value)) { callback(new Error('不能输入汉字!')); } } callback(); }; { validator: checkData, trig

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

ant design 的 Form 表单 自定义验证不能输入中文和数字，只能输入大写的字母

luzhaopan的博客

12-07

9737

// validator 为自定义校验 <FormItem label="数据" key="tableData"> {getFieldDecorator('tableData', { rules: [ { required: true }, { validator: checkData, trigger: 'blu...

身份证比较全的正则校验方法（react）

qq_41020757的博客

11-25

3124

certificate(rule, value, callback, form) { const provs = { 11: '北京', 12: '天津', 13: '河北', 14: '山西', 15: '内蒙古', 21: '辽宁', 22: '吉林', 23: '黑龙江 ', 31: '上海', 32: '江苏', 33: '浙江', 34: '安徽.

vue antd表单校验

irisMoon06的博客

09-07

424

form-item' }]"form// 统一定义一个`rules`// 提取`validator`规则，独立定义`pass`// eslint会报错// 加个new Error()} else {== '') {

React，antd-Form自定义正则校验

congxue666的博客

02-19

2399

下面我就以校验是否输入的是数字、字母、下划线的组合为例。 antd 组件库中<Form.Item></Form.Item>标签有一个属性rules，它就是做正则校验的。我们只需要给pattern添加数字、字母、下划线的组合的正则校验就可以了。 rules: [{ required: true, message: '请输入名称' },{ max:20, message: '名称不超过20个字符' },{ pattern: new RegExp(/^[0-9a-zA-Z_]{1.

antd中表单校验正则使用方式

蓝枫秋千的踩坑记录

01-15

6287

类组件的结构(最外层需要先包裹一层语法糖) const PersonManagement = Form.create()( class extends React.Component{} ) epxort default PersonManagement 从form中解构出需要的一些方法 const { getFieldDecorator } = this.props.form...

React项目账号、密码、用户名、手机和Email正则校验

jp2021的博客

10-25

1451

React项目账号、密码、用户名、手机和Email正则校验。

react antd 表单正则校验

jojo1001的博客

10-26

1710

可以给 Form表单加上正则校验，使用如下 react表单中正则校验手机号码 <Form> <Form.Item rules={[ { required: true, message: '请输入' }, { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码格式！' }, ]} name="bussS

react ant design 表单自定义正则校验手机号

liaorihua的博客

12-01

2144

react ant design 表单自定义校验 <Form ref={this.formRef} name="normal_login" className="login-form" hideRequiredMark layout="vertical" onFinish={this.onFinish}> {/* 手机号 */} <Form.Item label="手机号" name="phone"

antd vue form 手动校验_前端 Form 的表单的一个通用解决方案

weixin_39929595的博客

11-20

1290

原文：【第1535期】前端 Form 的表单的一个通用解决方案这是一篇来自微信公众号的文章，写的还不错，摘抄过来欣赏一下。文章开始之前，如果使用过AntD框架form表单的同学我觉得阅读应该不成问题，其他同学也还可以（废话）。文章从下边开始☟☟☟☟☟☟前端的Form 表单主要用于解决数据获取、数据校验、数据赋值这三大类问题。这篇文章里面的提供的解决方案能够比较完美的用在 React 框架上，但是...

2021-07-20 项目 - 关于Antd表单校验

Lachesis_的博客

07-20

389

简要的说明一下项目中用到的校验前提紧要： React，Antd3.0，表单校验用Form.create({1})(2)包装组件 1: 附加的配置项在1中写入 name:'Doctor_self'，那么包装组件中的表单字段id就有了Doctor_self前缀详见 Form-API 2: 组件名 const App = Form.create({ name: 'Doctor_self' })(Doctor); export default App; 包装之后，组件就有了this.props.form下

React+Antd 无插件实现多个输入框验证码功能 + 倒计时(附完整代码)

Cvory

06-29

2136

需求如下图，实现多个框的验证码，并且在输入后自动调用接口思路在一个div中放置对应个数的span 使用一个input，然后让它透明，定位在div之上 span截取对应的值进行显示 Code 主要代码：完整代码 import React, { useState, useEffect } from 'react'; import { InputNumber } from 'antd'; import { navigate } from '@/utils/common';//公用跳转 impo

react+antd：Form校验`getFieldDecorator`警告

superYe7的博客

03-25

2642

Warning: `defaultValue` is invalid for `getFieldDecorator` will set `value`, please use `option.initialValue` instead. <FormItem label="等级"> {getFieldDecorator('grade', { rules: [{...

antd form使用pattern和validator自定义校验规则

最新发布

09-28

在React-antd中，`Pagination`组件自带了默认的分页样式和功能，包括下拉框。如果你想要自定义分页下拉框，你可以通过以下几个步骤操作： 1. **替换组件**: 首先，你需要从`Pagination`组件中移除它的`Dropdown`部分。这通常可以通过不传递`onChange`和`onchangeExtra`等事件属性来实现，因为它们控制着分页下拉框的行为。 ```jsx import { Pagination } from 'antd'; const CustomPagination = ({ total, onChange }) => { return ( <Pagination total={total} pageSizeOptions={['10', '20', '30', '40']} current={1} showSizeChanger={false} // 关闭默认的下拉框 onChange={onChange} // 保留更改当前页码的回调 /> ); }; ``` 2. **手动添加下拉框**: 如果你还是想让用户可以选择页面大小，可以自己创建一个可交互的元素，并绑定`onChange`事件。例如，可以使用`Select`组件或其他选择器组件。 ```jsx import Select from 'antd/lib/select'; // ... const paginationDropdown = ( <div> <label>每页显示:</label> <Select options={['10', '20', '30', '40']} value={pageSizeOption} onChange={(value) => onChange({ pageSize: parseInt(value), current: 1 })} /> </div> ); ``` 3. **合并组件**: 将自定义的分页按钮和选择器组合在一起，并将`onChange`函数作为两者共同的更新策略。 ```jsx const CustomPaginationWithDropdown = (props) => { const [pageSizeOption, setPageSizeOption] = React.useState('10'); const handleChange = (params) => { setPageSizeOption(params.pageSize); onChange(params); }; return ( <> {paginationDropdown} <CustomPagination total={props.total} onChange={handleChange} /> </> ); }; ``` **相关问题--:** 1. 我们如何处理用户在分页下拉框中选择不同的页面大小时的事件？ 2. 是否可以直接覆盖`Pagination`的CSS来自定义外观，而不是完全替换它？ 3. 如何在`CustomPaginationWithDropdown`组件中保持状态一致性，如总页数的变化会自动更新分页下拉选项？