React Form组件 输入框首尾不可输入空格

最新推荐文章于 2022-06-24 16:16:31 发布
最新推荐文章于 2022-06-24 16:16:31 发布
阅读量1.9k 收藏 4
点赞数 3
分类专栏： 前端小技巧 文章标签： reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41958891/article/details/107311363
版权 
getValueFromEvent: event => {return event.target.value.replace(/(^\s*)|(\s*$)/g, '');},

爱吃橘子的喵喵~
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
react 输入框禁止输入空格添加校验
weixin_43866627的博客
10-10 714
console.log('处理后---', e.target.value.replace(/\s+/g, ''))})(<Input size="large" placeholder="请输入名字" maxLength={20} />)}// 方式二：粗暴点<Input>不允许输入空格(其实是将e.tartget.value转成控件自己的值)// 这个方法的用途非常强大，还可以结合upload做一些文件上传之后的回调处理。placeholder="请输入处理备注"message: '请输入名字',
react form 正则表达式前后不能以空格结尾
曹曹的博客
08-31 2303
下面是使用 react 3.* 版本实现一个在新建文件夹时针对文件夹名称的一个form表单的验证 1. 针对不同的验证规则显示不同的message 2. rule1: 表示不能什么都不输入， 即该字段为必须字段 { required: true, message: 'Can\'t not input empty file name!', } 3. rule2: 表示不能以空格开始或结束 { pattern: new RegExp(/^(?!\s)(?!.*\s$)/
ant的input框禁止输入空格
m0_52243496的博客
03-31 2269
1、一种是***普通输入框***，这两种方法都可以阻断空格。 ① οninput="value=value.replace(/[^\d]/g,’’)" ② οnkeyup="this.value=this.value.replace(/[^\d.]/g,’’)" 2、一种是***密码输入框***，只能用第一种方法来阻断空格输入。（经反复测试，用第二种方法当不停点击空格的时候还是可以输入成功） ...
禁止输入框输入空格 onkeyup
木白的博客
06-05 5520
原生 <input type="text" onkeyup="this.value=this.value.replace(/\s+/g,'')"> vue <input type="text" @keyup="this.value=this.value.replace(/\s+/g,'')">
验证字符串首尾不允许输入空格，中间只能输入一个空格
程序羊的博客
07-29 5045
摘要：   今天在项目中遇到一个需求，验证一个文本输入字符串的格式，要求是输入的内容前后不能出现空格符，而字符串中间可以出现一个空格（只能一个，不能连续输入两个空格）。 解决方案： （1）可以利用trim()方法去除字符串的首尾空格； （2）利用正则\s{2,}获取连续出现两个空格的位置，替换成一个空格； （3）使用onkeyup事件。 实现代码： html代码： <input type="text" id="roleid" name="roleName" class="layui-input" on
React Form组件的实现封装杂谈
08-27
React Form组件的实现封装杂谈 在 React 框架中，Form 组件是非常常见的组件之一，它提供了与用户交互的方式，例如提交订单、设置系统等。Form 组件的实现封装可以达到简化开发的目的。本文将讨论 Form 表单组件...
iput:用于React的ip输入组件
05-27
我放关于用于react（> = 0.14）的ip输入组件。用法基本用法 import React from 'react' ; import ReactDOM from 'react-dom' ; import IPut from 'iput' ; ReactDOM . render ( < IPut> , document . getElementById...
react-form:用于表单验证的react组件
05-04
React本身并不直接处理表单的状态管理和验证，因此React Form这样的第三方组件就显得尤为重要。React Form通过提供一套API和生命周期方法，使得开发者可以方便地与表单控件进行交互，捕获用户输入，同时在用户提交...
React-Native做一个文本输入框组件的实现代码
12-09
好了，废话不多说，今天在做登录界面的时候，我发现，登录注册的文本框样式都是一个样的，如果一个一个的写，就会显得有些麻烦了，于是我就简单的封装了一下TextInput这一个组件 上图就是我放到登录界面的效果啦。 ...
react+antd系列之Form表单(2)：格式限制验证
菜鸟搬砖记
11-20 1万+
格式限制 antd中表单的功能很多，下面就为大家整理了一下antd中常用的几种表单输入格式验证： 1. 输入框不能为空限制，如下： {getFieldDecorator('name', { rules: [{ required: true, message: '名称不能为空', }], ...
react 输入框输入异常
weitao_11的博客
06-24 1675
react 输入框输入异常,光标异常，输入会变
正则文本输入框不允许开头和结尾使用空格，但允许在中间使用空格
m0_46577631的博客
04-13 2817
##这里以vant ui文本框使用为例，亲测有效 <van-field v-model="vanfieldValue" roes="4" autosize required label="反馈内容" type="textarea" maxlength="500" placeholder="请输入内容" show-word-limit :rules="[{required:true,trigger:'onSubmit',message:'请输入内容'},{
TextArea禁止输入空格和回车
Realizee的博客
09-27 7702
在textarea 里面，空格和换行会被保存为/s和/n，如果我们前台输入和前台显示的文字都是在 textarea 里面，其实并不需要做任何处理，你在 textarea 里面编写的样式会按照你之前编辑时候的样式，正确的显示出来。 那么，如果要 textarea 编辑提交的文字，从后台返回之后，不是显示在 textarea 里面，那么就需要考虑处理空格和换行了； 这个情况可以看看下小朋友的博客，写的很赞 处理textarea中的换行和空格 - 下小朋友 - 博客园 又或是......
React实战 | JSX的空格与换行不显示问题的解决方案
qq_35536883的博客
08-07 1万+
空格显示不正常 这是因为浏览器显示机制，会将连续多个空格显示成1个空格。 在这些示例中，HTML和JSX中的空格是一样的 <div>Hello•World</div> <div>•Hello•World</div> <div>••Hello•World</div> <div>•••Hello•World•••&lt...
前台input输入框内禁止输入空格的方法
郭Sir的博客
10-26 1万+
在标签里添加属性 onKeypress=“javascript:if(event.keyCode == 32)event.returnValue = false;” 即可! &lt;input name="name" data-options="required:true" onKeypress="javascript:if(event.keyCode == 32)event.retur...
AntDesign 之Input控件，禁止用户输入空格
world_kun的博客
08-07 1万+
有两种解决方案，下面上代码 <Form.Item> { getFieldDecorator("content",{ rules:[ { required:true, message:"内容不能为空" }, ...
正则表达式: input框禁止输入空格:不能只有空格、不能有空格、不能为空的判断
热门推荐
chun的博客
09-23 1万+
1.只有中间和最后能输入空格(如果让最后不能输入空格则把最后一个*改成+)，(如果想让开头可以输入空格则把+改成*) ^[^\s]+[\s]*.*$ 2.不能输入空格 ^[^\s]*$ 3.如果也不能为空(我是用required来判断的),把*改成+ （具体我没测试，感觉可以） ^[^\s]+[\s]*.+$ ...
禁止文本框输入中文和空格（适用于密码输入框）
徐同保的专栏
06-06 5526
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, max
React关于Input的基本语法--注意点
m0_38081531的博客
09-17 1380
1、this.state:存储数据 2、用onChange监听事件；而不是onchange（JS里面的写法） 3、JSX用到了JS代码，需要用花括号｛｝包围 4、应用组件时，得用ES6的bind(this)，绑到组件上去 5、要改变数据状态，不能直接用this.state.inputValue...；用this.setState(...); 6、写注释：｛/*注释*/｝ 或｛//(单独一...
react modal弹窗输入框
最新发布
06-10
React Modal 是一个常用的弹窗组件库，可以用来实现弹窗输入框的功能。下面是一个简单的实现示例： 首先，你需要引入 React Modal： ```javascript import Modal from 'react-modal'; ``` 然后，在你的组件中，你需要定义一个状态来控制弹窗的显示与隐藏： ```javascript function MyComponent() { const [modalIsOpen, setModalIsOpen] = useState(false); const openModal = () => { setModalIsOpen(true); }; const closeModal = () => { setModalIsOpen(false); }; return ( <div> <button onClick={openModal}>打开弹窗</button> <Modal isOpen={modalIsOpen} onRequestClose={closeModal} > <h2>请输入：</h2> <input type="text" /> <button onClick={closeModal}>确定</button> </Modal> </div> ); } ``` 在这个示例中，我们定义了一个状态 `modalIsOpen`，表示弹窗是否打开。当用户点击打开弹窗的按钮时，我们调用 `openModal` 函数来更新状态，打开弹窗。当用户点击弹窗中的确定按钮或者关闭弹窗时，我们调用 `closeModal` 函数来更新状态，关闭弹窗。 在弹窗中，我们可以通过普通的 HTML 元素来实现输入框和按钮。在这个示例中，我们定义了一个输入框和一个确定按钮，用户可以在输入框中输入内容，并点击确定按钮来关闭弹窗。 需要注意的是，在 React Modal 中，我们需要通过 `isOpen` 属性来控制弹窗的显示与隐藏。当 `isOpen` 的值为 `true` 时，弹窗会显示出来；当 `isOpen` 的值为 `false` 时，弹窗会隐藏起来。同时，我们还需要定义一个 `onRequestClose` 回调函数，来处理用户点击弹窗以外的区域时，弹窗自动关闭的情况。 希望这个示例对你有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值