react的antd表单校验,禁止输入空格并触发校验提示

首先需要用到form组件,在form.item内添加rules属性,写正则表达式

TypeScript 复制代码
<Form.Item
  label="员工姓名"
  name="name"
  rules={[
    { required: true, message: '员工姓名' },
    { pattern: /^(?!\s*$).+$/, message: '不能全是空格' },
   ]}
  >
<Input placeholder="请输入员工姓名" />
</Form.Item>

关键代码:{ pattern: /^(?!\s*).+/, message: '不能全是空格' }

相关推荐
曲意已决4 分钟前
《深入源码理解webpac构建流程》
前端·javascript
去伪存真14 分钟前
前端如何让一套构建产物,可以部署多个环境?
前端
KubeSphere20 分钟前
EdgeWize v3.1.1 边缘 AI 网关功能深度解析:打造企业级边缘智能新体验
前端
掘金安东尼32 分钟前
解读 hidden=until-found 属性
前端·javascript·面试
1024小神40 分钟前
jsPDF 不同屏幕尺寸 生成的pdf不一致,怎么解决
前端·javascript
滕本尊40 分钟前
构建可扩展的 DSL 驱动前端框架:从 CRUD 到领域模型的跃迁
前端·全栈
借月41 分钟前
高德地图绘制工具全解析:线路、矩形、圆形、多边形绘制与编辑指南 🗺️✏️
前端·vue.js
li理42 分钟前
NavPathStack 是鸿蒙 Navigation 路由的核心控制器
前端
二闹44 分钟前
一招帮你记住上次读到哪儿了?
前端
li理1 小时前
核心概念:Navigation路由生命周期是什么
前端