通过正则来控制input只能输入中英文某类字符

背景:react + antd
目标:通过正则来控制input只能输入某类字符:

	state={
		name:""
	}
	handleNameChange = v => {
        this.setState({ name: v.target.value });//*1:input的value发生改变时,将state中的name设置为改变后的值
    };
  1. 定义一个过滤方法,以只允许输入中英文为例:
	filterName = (value = "") => {
	    return value.trim().replace(/[^a-zA-Z\u4e00-\u9fa5]/g,"");
	};
  1. 在input元素中控制value:
	<Input
	 maxLength={10} //长度限制可以通过maxLength属性简单的实现
	 placeholder="请输入"
	 value={this.filterName(this.state.name).trim()}//*2 将value指定为state中的name
	
	 onChange={this.handleNameChange}
	/>

题外话:通过* 1 和 * 2 ,就实现了react中 input 值 的双向绑定

一个值得注意的问题:由于只允许输入中文和英文,所以空格也是不被允许输入的,我们的输入法在输入连续的中文时,将词语中间自动识别为空格,所以导致不能输入连续的中文,只能一个字一个字的输入。关于这个问题的解决办法:

	filterName = (value = "") => {
	    return value.trim().replace(/[^a-zA-Z\u4e00-\u9fa5/s]/g,"");
	};

在正则匹配后面加了一个/s,代价是允许输入空格。如果需要这么做,可以考虑在后续提交表单时过滤掉所有的空格。

斟酌了一下还是只允许输入单字更方便,主要看产品能否接受。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值