使用正则与JS限制Input仅输入数字的实现方法

限制输入数字的需求背景

在注册账号或填写信息的场景中，若用户误将电话号码输入为汉字或英文字母，会导致数据错误。为确保手机号、邮编及电话号码等文本框仅能接收数字字符，需对输入内容进行限制。

正则表达式匹配原理

实现该功能的核心思路是利用正则表达式匹配非数字字符。

var numRegex = /\D/g

基于onblur事件的实现方案

随后利用JavaScript的onblur事件处理逻辑。

onblur事件定义如下：

当对象失去焦点时触发该事件。

该事件常用于JavaScript验证代码，主要应用于表单输入框的校验。

其语法结构如下：

在HTML标签中：

<element onblur="SomeJavaScriptCode">

在JavaScript代码中：

object.onblur= function(){
//操作
myScript; 
} 

可通过addEventListener()方法绑定事件：

object.addEventListener('blur',myScript);

完整代码示例

完整的DEMO代码示例如下：

var numRegexFn = function(obj){
obj.value = obj.value.replace(numRegex,'');
if(!obj.value){
alert('请输入数字');
}else{
alert('pass');
}
}
phone.onblur = function(){
numRegexFn(this);
}

上述内容介绍了利用正则表达式和JS限制输入框仅能输入数字的方法，希望能对读者有所帮助。