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: '不能全是空格' }

相关推荐
来杯三花豆奶1 天前
Vue 3.0 Mixins 详解:从基础到迁移的全面指南
前端·javascript·vue.js
想学后端的前端工程师1 天前
【React性能优化实战指南:从入门到精通-web技术栈】
前端·react.js·性能优化
白兰地空瓶1 天前
React Hooks 深度理解:useState / useEffect 如何管理副作用与内存
前端·react.js
cike_y1 天前
JSP内置对象及作用域&双亲委派机制
java·前端·网络安全·jsp·安全开发
巴拉巴拉~~1 天前
KMP 算法通用进度条组件:KmpProgressWidget 多维度 + 匹配进度联动 + 平滑动画
java·服务器·前端
子洋1 天前
AI Agent 介绍
前端·人工智能·后端
徐同保1 天前
使用n8n自动发邮件
前端
dly_blog1 天前
setup 函数完整指南!
前端·javascript·vue.js
霍理迪1 天前
基础CSS语法
前端·css
粟悟饭&龟波功1 天前
【GitHub热门项目精选】(2025-12-19)
前端·人工智能·后端·github