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

相关推荐
Monly211 小时前
Vue:Table合并行于列
前端·javascript·vue.js
No Silver Bullet1 小时前
ReactNative进阶(五十九):存量 react-native 项目适配 HarmonyOS NEXT
react native·react.js·harmonyos
ak啊1 小时前
开发一款 VSCode 插件
前端
子非鱼9212 小时前
使用ES5和ES6求函数参数的和、解析URL Params为对象
前端·javascript·es6
爱学英语的程序员2 小时前
React 中常见的Hooks,安排!
前端·react.js·前端框架
zhanggongzichu2 小时前
零基础Vue入门6——Vue router
前端·javascript·vue.js·vue3·路由·vue router
江湖行骗老中医3 小时前
React Native 开发 安卓项目构建工具Gradle的配置和使用
android·react native·react.js
stark张宇3 小时前
Web - CSS3过渡与动画
前端·css·css3
ssrswk93 小时前
通过制作docker镜像的方式在阿里云部署前端后台服务
前端·阿里云·docker
qq_316837753 小时前
uniapp 打包apk 播放带透明通道的webm格式视频
java·前端·uni-app