「前端」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 = (e) => {
    const { value } = e.target;
    const reg = /^1([0-9]*)?$/;		// 以数字1开头，任意数字结尾，且中间出现零个或多个数字
    if ((reg.test(value) && value.length < 12) || value === '') {
      this.setState({
        userName: value
      })
    }
  }

  // 纯数字验证
  vCodeChange = (e) => {
    const { value } = e.target;
    const reg = /^\d*?$/;	// 以任意数字开头和结尾，且中间出现零个或多个数字
    if ((reg.test(value) && value.length < 7) || value === '') {
      this.setState({
        verificationCode: value
      })
    }
  }

以上面登录界面为例，userNameChange和vCodeChange函数是两个Input框的onChange函数，使用正则表达式的test函数进行验证。验证通过修改state中相应的内容。

解决方法3
使用JavaScript中的replace方法替换非数字字符。

至于更多的解法，在下才疏学浅，欢迎各位大佬在评论区提出来。