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

最新推荐文章于 2024-08-16 14:32:16 发布

原创最新推荐文章于 2024-08-16 14:32:16 发布 · 2.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

本文介绍了如何使用antd组件库中的Form.Item标签进行正则校验，特别是针对名称输入框，设置了必须包含数字、字母、下划线的组合，并限制了字符长度不超过20个。通过rules属性配置，利用pattern属性添加了相应的正则表达式进行验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下面我就以校验是否输入的是数字、字母、下划线的组合为例。

antd 组件库中 <Form.Item></Form.Item>标签有一个属性rules，它就是做正则校验的。我们只需要给pattern添加数字、字母、下划线的组合的正则校验就可以了。

 rules: [{ required: true, message: '请输入名称' },{ max:20, message: '名称不超过20个字符' },{ pattern: new RegExp(/^[0-9a-zA-Z_]{1,}$/, "g") , message: '名称只允许包含数字、字母和下划线' } ],

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

一枚程序鱼

关注关注

1
点赞
踩
2

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Antd Form字段正则验证

u013790941的博客

01-05

1211

<FormItem label="IP段" name="ip_segment" {...conmentLayout} rules={[ { required: true, message: '请输入!' }, { pattern: /^(?=(\b|\D))(((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]).

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

热门推荐

Jim Suen

07-01

1万+

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

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

React-pattern:React的设计模式

05-16

React亲 React的设计模式 1.从Parrent组件渲染器访问其他组件的方法。（ :check_mark_button: 待办的） React通过ref为您尝试执行的操作提供了一个接口。给组件分配一个ref属性，渲染该组件后，该属性就可以在渲染器的refs对象上使用。示例：我有三个部分： App ， course和footer 。 App.js var App = React . createClass ( { nextLesson : function ( ) { this . refs . course . next_lesson ( ) ; } , prevLesson : function ( ) { this . refs . course . prev_lesson ( ) ; } , render : function ( ) { return (

React Ant form 自定义校验规则问题总结

weixin_52767262的博客

07-18

2509

官网给出的例子很简单label="用户名"rules={[{requiredtrue,message'请输入用户名',},]}>登录重值名称说明类型仅在type为array类型时有效，用于指定数组元素的校验规则rule）

react antd 表单正则校验

jojo1001的博客

10-26

1886

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

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

liaorihua的博客

12-01

2210

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

React的form表单自定义校验规则

06-18

1188

React的form表单自定义校验规则

关于react-antd里的表单的自定义校验

qq_48211147的博客

08-19

1737

自定义校验，输入11位手机号，自动校验这个手机号在不在数据库里面，因为只有在这个数据库里面的手机号才能被添加为管理员。如果这个手机号不在，，则底下则会提示该账号不存在或者存在异常。

Antd的Form表单设置validator自定义校验后，required必填校验就不生效？

最新发布

清颖的博客

08-16

1746

做运营系统、后台系统、ToB项目时避免不了需要研发表单，要填写各种内容。操作：给`Form.Item`的属性`rules`，给`rules`里面指定了 *{ required: true }*, 同时给了 `validator` 自定义校验方法。问题描述：自定义校验后，required 必填不起效。解决……

快速生成可交互表单的antd-schema-form工具介绍

在标签中提到的 "ant react-component form antd ant-design TypeScript" 说明了antd-schema-form与Ant Design一样，支持React组件形式，并且可以与TypeScript一起使用，以获得更好的开发体验和类型检查。...

React-Patterns:简单的React模式样本

05-06

React模式 React模式的简单示例。演示版要启动该应用程序，只需运行npm run start 。您的应用程序应从localhost:3000开始，您可以在其中浏览模式。模式档案文件 src/patterns中的每个src/patterns包含： api / index.js-使用模式的API index.js -API的示例用法想象一下， api目录是您包含在项目中的npm-module。该API通过为您提供许多工具，使您可以编写可读的代码。尝试在示例文件中进行操作，以了解它的好处。灵感学分创建该存储库的想法来自于完成的课程

[免费]React Design Patterns and Best Practices

11-17

React Design Patterns and Best Practices pdf 文档，

AntD中Form的input正则校验:不能输入空格

YUSIR 完美CODING世界

11-22

4016

Input不能输入空格正则校验

antd form的rules属性中写入正则表达式，完成自定义校验

Peter_Anna的博客

12-22

803

antd form的rules属性中写入正则表达式，完成自定义校验

React 模式（中文版）

weixin_34351321的博客

01-23

644

中文版：reactpatterns.cn/ 原版：reactpatterns.com 函数组件 (Function component) 函数组件是最简单的一种声明可复用组件的方法他们就是一些简单的函数。 function Greeting() { return <div>Hi there!</div>; } 复制代码从第一个形参中获取属性集 (props) fun...

react patterns

weixin_33676492的博客

02-28

115

数据下发再上发切换page import HomePage from './HomePage.jsx'; import AboutPage from './AboutPage.jsx'; import UserPage from './UserPage.jsx'; import FourOhFourPage from './FourOhFourPage.jsx'; const P...

React Patterns

weixin_30800807的博客

09-30

177

Contents Stateless function JSX spread attributes Destructuring arguments Conditional rendering Children types Array as children Function as children Render callback Children pass-thro...

antd 表单正则

weixin_44860425的博客

02-04

1196

记录第一次用antd 遇到的正则问题表单里面调用方法的时候千万不要调用错了，方法中getFieldValue（‘这里也要注意’） import React, { Component } from "react"; import { Form, Input, Button } from 'antd'; import './../../assets/css/register.css' class...

React Ant form 自定义校验规则以及正则校验

weixin_66709443的博客

02-14

1147

校验自定义