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生态都有哪些?
前端·javascript·vue.js
一只大头猿4 分钟前
基于SpringBoot和Vue的超市管理系统
前端·vue.js·spring boot
用户14567756103727 分钟前
告别繁琐操作!Excel合并原来可以这么轻松
前端
itslife38 分钟前
vite 源码 - 创建 ws 服务
前端·javascript
懒人Ethan1 小时前
解决一个C# 在Framework 4.5反序列化的问题
java·前端·c#
用户1456775610371 小时前
Excel合并数据太麻烦?这个神器3秒搞定,打工人必备!
前端
西洼工作室1 小时前
前端混入与组合实战指南
前端
YQ_ZJH2 小时前
Spring Boot 如何校验前端传递的参数
前端·spring boot·后端
报错小能手2 小时前
linux学习笔记(18)进程间通讯——共享内存
linux·服务器·前端
魔云连洲2 小时前
深入解析:Object.prototype.toString.call() 的工作原理与实战应用
前端·javascript·原型模式