#私藏项目实操分享# 【React工作记录十五】关于ant design中input限制加空格的问题

简介: #私藏项目实操分享# 【React工作记录十五】关于ant design中input限制加空格的问题

前言

我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷

导语

今天测试找到我 说这边出现了一个bug 这个输入框禁止输入空格 于是乎我看一眼代码

原来这样可以解决这个问题

image.png

解决思路

<Form.Item label="信用代码:">
                    {getFieldDecorator('creditCode', {
                      initialValue: type === 
'update' ? lecturerOrganizationEntity.creditCode : '',
                      rules: [{ required: true, message:
 '请输入信用代码' },        // 方式一:正则匹配(提示错误,阻止表单提交)
                      {
                        pattern: /^[^\s]*$/,
                        message: '禁止输入空格',
                      }],
                    })(<Input disabled={disabled} />)}
                  </Form.Item>

总结

在对应的位置多加一个正则匹配即可 则问题得到解决

image.png

相关文章
|
2月前
|
资源调度 JavaScript 前端开发
使用vite+react+ts+Ant Design开发后台管理项目(二)
使用vite+react+ts+Ant Design开发后台管理项目(二)
|
6月前
|
前端开发 JavaScript 安全
使用React、TypeScript和Ant Design构建现代化前端应用
使用React、TypeScript和Ant Design构建现代化前端应用
185 0
|
6月前
|
前端开发
react使用ant desgin 组件实现便利开发
react使用ant desgin 组件实现便利开发
|
6月前
|
前端开发 JavaScript Linux
[React] 实现点击Button将文件名赋值Input
[React] 实现点击Button将文件名赋值Input
|
6月前
|
前端开发
react获取input的value值
react获取input的value值
134 0
|
11月前
|
存储 前端开发
React & webpack &ant 学习
React & webpack &ant 学习
71 0
|
前端开发
从零开始学习React-引入Ant Design 组件(八)
从零开始学习React-引入Ant Design 组件(八)
99 0
|
11天前
|
前端开发 JavaScript 开发者
颠覆传统:React框架如何引领前端开发的革命性变革
【10月更文挑战第32天】本文以问答形式探讨了React框架的特性和应用。React是一款由Facebook推出的JavaScript库,以其虚拟DOM机制和组件化设计,成为构建高性能单页面应用的理想选择。文章介绍了如何开始一个React项目、组件化思想的体现、性能优化方法、表单处理及路由实现等内容,帮助开发者更好地理解和使用React。
38 9
|
1月前
|
前端开发
深入解析React Hooks:构建高效且可维护的前端应用
本文将带你走进React Hooks的世界,探索这一革新特性如何改变我们构建React组件的方式。通过分析Hooks的核心概念、使用方法和最佳实践,文章旨在帮助你充分利用Hooks来提高开发效率,编写更简洁、更可维护的前端代码。我们将通过实际代码示例,深入了解useState、useEffect等常用Hooks的内部工作原理,并探讨如何自定义Hooks以复用逻辑。
|
1月前
|
前端开发 JavaScript API
探索React Hooks:前端开发的革命性工具
【10月更文挑战第5天】探索React Hooks:前端开发的革命性工具