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

相关推荐
西洼工作室7 分钟前
高效管理搜索历史:Vue持久化实践
前端·javascript·vue.js
广州华水科技15 分钟前
北斗形变监测传感器在水库安全中的应用及技术优势分析
前端
开发者如是说38 分钟前
Compose 开发桌面程序的一些问题
前端·架构
旺代1 小时前
Token 存储与安全防护
前端
洋不写bug2 小时前
html实现简历信息填写界面
前端·html
三十_A2 小时前
【无标题】
前端·后端·node.js
excel2 小时前
Vue 编译器源码解读:transformVBindShorthand 的设计与原理
前端
时间的情敌2 小时前
Vue3的异步DOM更新:nextTick的正确使用方法
前端·javascript·vue.js
风语者日志2 小时前
[LitCTF 2023]作业管理系统
前端·网络·安全·web安全·ctf
excel3 小时前
深入解析:Vue 编译器核心工具函数源码(compiler-core/utils.ts)
前端