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

相关推荐
天若有情67315 分钟前
Canvas生成艺术|意外诞生的混沌风暴(附完整源码+GitHub部署)
前端·css·html·github·canvas·网页
OPHKVPS1 小时前
黑客反被黑:研究人员利用 XSS 漏洞劫持 StealC 控制面板,窃取攻击者情报
前端·网络·npm
whyfail1 小时前
Pretext:告别DOM重排,让文本布局飞起来
前端·dom
楚轩努力变强2 小时前
2026 年前端破局:从页面开发到前端隐私计算全链路架构师,构建原生数据安全合规体系
前端·国密算法·数据安全合规·前端安全·web crypto api·前端隐私计算·2026前端趋势
敲敲了个代码2 小时前
React 那么多状态管理库,到底选哪个?如果非要焊死一个呢?这篇文章解决你的选择困难症
前端·javascript·学习·react.js·前端框架
yungcy61632 小时前
React性能优化实战:从卡顿到丝滑,15个核心技巧覆盖全场景
前端·react.js·性能优化
阿珊和她的猫2 小时前
React 中 CSS 书写方式全解析
前端·css·react.js
打瞌睡的朱尤2 小时前
js复习--考核
开发语言·前端·javascript
前端极客探险家2 小时前
React 全面入门与进阶实战教程
前端·javascript·react.js