「前端」React中限制输入框仅输入数字或手机号

最新推荐文章于 2024-06-13 09:43:07 发布
最新推荐文章于 2024-06-13 09:43:07 发布
阅读量1.2w 收藏 5
点赞数 3
分类专栏： # React学习记录 # 个人项目踩坑 文章标签： JavaScript React 前端 正则表达式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26377547/article/details/97259641
版权

很久没有写博客了，最近在自己做项目的过程中遇到了一些坑，踩完之后怕自己忘了，写下来记录一下。
在React中，我们在修改输入框的内容是会调用到onChange函数，然后通过onChange函数实现修改state的功能，在这个过程中如何实现对输入内容的限制呢？
例如在登录的时候，对手机号和验证码的输入做限制：
登录注册表单输入限制
解决办法1：
直接使用antd中的Form组件，使用getFieldDecorator方法，在其中写入rules，加入pattern，写一个 正则表达式对象做作为校验规则，这里不着重介绍，详情进点击链接：https://ant.design/components/form-cn/

解决办法2
在onChange函数中写入正则表达式进行匹配，本文介绍这种方法，简单易懂：

  // 手机号验证
  userNameChange =
最低0.47元/天 解锁文章
Jack_WJQ
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端jquery控制input只能输入符合规范的手机号码
Revival_Liang的博客
05-03 7916
var inputPerameter = $('#inputPerameter'); var booleanValue = true,value; function test(){ value = inputPerameter.val(); if(value.length==0){ booleanValue = true; } if(value.
React中限制输入框仅输入数字或手机号 密码验证
weixin_42262889的博客
09-21 2034
https://blog.csdn.net/qq_26377547/article/details/97259641 https://ant.design/components/form-cn/ http://caibaojian.com/regexp-example.html 密码验证
推荐文章：探索「react-verification-code-input」—— 构建安全登录的得力助手
最新发布
gitblog_00010的博客
06-13 338
推荐文章：探索「react-verification-code-input」—— 构建安全登录的得力助手 项目地址:https://gitcode.com/suweya/react-verification-code-input 在网络安全日益重要的今天，验证码输入框作为验证用户身份的最后防线，其重要性和用户体验成为了开发者不可忽视的一部分。今天，我们为您带来一款专注于提升验证码输入体验的开源神器...
react Input只能输入正整数
weixin_44510655的博客
04-26 1400
只能输入正整数 javascript
React Native之TextInput限制只能输入数字和小数
热门推荐
fox_wei的博客
04-12 1万+
今天做了一个类似计算器的功能的，但是在输入TextInput遇到了这个问题了。那么我这次来写一下关于这个该怎么整理import React from 'react'; import { StyleSheet, Text, View, Image, Dimensions, TextInput, TouchableOpacity, ScrollView } from 'react-native';
React Antd 中怎么设置表单只输入数字
weixin_50923989的博客
07-03 3410
React用antd的Form组件提交信息的时候有时候需要限制只能填数字，笔者在CSDN上看到的文章都属于比较老的版本，不能解决我的问题，在我知道怎么解决之后作此文以供参考。
js修改绑定手机号码表单代码
04-07
在手机号码修改场景下，表单通常包含输入框（input元素）供用户输入新的手机号码，以及提交按钮（button元素）用于触发验证和修改操作。设计师应确保表单具有良好的用户体验，如输入提示、格式校验等。 2. **事件...
车牌输入框用于输入车牌号码
06-10
车牌输入框是软件或应用程序中常见的一种特殊文本输入控件，设计用于用户输入车辆的车牌号码。在实际应用中，这种输入框通常会根据不同国家或地区的车牌号码格式进行定制，以确保用户输入的数据符合规范。在中国，...
编辑框限制输入特定文本例程.rar
03-28
4. 后端验证：虽然主要的输入限制应在前端完成，但后端验证同样重要，以防恶意用户绕过前端限制。 5. 自定义控件：在某些情况下，开发者可能会选择创建自定义的编辑框控件，这样可以更自由地控制输入行为。 6. ...
vue实现手机号码的校验实例代码（防抖函数的应用场景）
10-16
在这个例子中，正则表达式 `/^1[3|4|5|7|8][0-9]{9}$/` 用于匹配中国的手机号码，它确保输入的字符串以 "1" 开头，第二位是 3、4、5、7 或 8，后面跟着九个任意数字。 Vue 中的数据绑定允许我们将输入框的值 `v-...
react 通过小眼睛 控制密码显示与隐藏
04-11
本篇文章将深入探讨如何在React应用中实现这一功能，并结合实际代码示例进行详细讲解。 首先，我们需要理解React组件的基本结构。React组件是构建用户界面的独立、可复用的代码块。在这个场景下，我们可以创建一个...
reactphonenumber2:电话号码输入React组件
03-10
react-phonenumber2 电话号码输入React组件。 用jquery和select2制成。 安装 npm install --save reactphonenumber2 用法 首先将以下链接标记放入您的html文件中： < link rel =" stylesheet " href =" https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/0.8.2/css/flag-icon.min.css " /> import React , { useState } from 'react' import { ReactPhonenumber } from 'reactphonenumber2' const countries = [ { id : 'IR' , name : 'Iran' , dialingC
antd非必填项的手机号码校验
agua001的博客
06-25 1852
<a-input v-decorator="['communicationNumber', { rules: [ { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码', }, ], validateTrigger: 'blur', }]" placeholder="请输入手机号码" /> ...
React + Antd 4.0 手机号输入框含验证的完整示例
gzericlee的专栏
03-18 1782
新手入门，上手后到处翻资料，发现antd 3.0与 4.0的差别很大，边做边整理一些实用的代码供大家参考 用在登录窗口的手机号输入框的完整示例（版本：react版本 17.0.1antd 4.0） <Form.Item name="username" validateTrigger='onBlur' //仅在光标离开输入框时才做验证 rules={[ { required: true, ...
输入框限制只能输入正整数，输入其他内容清空掉（记录一下）
m0_47300818的博客
04-12 235
【代码】输入框限制只能输入正整数，输入其他内容清空掉（记录一下）
React Ant Design 3.X 中的获取表单值以及限制 input 只输入数字
Codernmx
09-01 1004
获取 antdesign form 表单的所有填写值（getFieldDecorator） this.props.form.getFieldsValue() 限制input 只能输入数字 rules: [{ required: true, pattern: new RegExp(/^[0-9]\d*$/, "g"), message: '请输入箱仓容'
react +antd 中form表单输入框的手机号，身份证号验证
weixin_45204443的博客
03-29 2314
这样会直接在输入时直接验证。表单字段验证常用正则表达式。这是验证比较全的网址博客。
fastadmin框架自带的数据效验
m0_64590669的博客
11-28 3013
fastadmin框架自带的数据效验
form表单常用的验证
lml_little的博客
03-04 4393
1.表单验证是登录和注册页面中最为常见的，下面是一些源代码和验证，可适当选取： //用户名   //手机号码 //手机验证码 class="radio-inline"> type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
react 输入框只允许输入数字，负号，并且只有两位小数
05-26
可以通过React中的正则表达式来限制输入框的输入内容。你可以在输入框的 onChange 事件中使用正则表达式来验证输入内容，只有当输入符合要求时才更新state。 以下是一个实现该功能的示例代码： ```jsx import ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值