版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
很久没有写博客了,最近在自己做项目的过程中遇到了一些坑,踩完之后怕自己忘了,写下来记录一下。
在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
方法替换非数字字符。
至于更多的解法,在下才疏学浅,欢迎各位大佬在评论区提出来。