如何用简单JS实现手机号仅输数字、姓名仅输文本的输入限制

前置调整：修改HTML输入框属性 #

你的原有代码中手机号输入框的type="text/number"属于无效属性，先替换为以下代码，增加唯一ID方便JS选中：

<input type="text" pattern="[0-9]{10}" class="input_fields" required placeholder="Phone number (+91)" id="phone"/>

姓名输入框已存在id="fullname"，无需额外修改。

核心JS实现代码 #

由于原有script标签写在head区域，直接操作DOM会因为元素未加载完成报错，推荐将以下代码放在</body>闭合标签之前即可：

// 姓名输入限制：仅允许中英文、空格
document.getElementById('fullname').addEventListener('input', function() {
  // 自动过滤数字、特殊符号等不符合要求的字符
  this.value = this.value.replace(/[^a-zA-Z\u4e00-\u9fa5\s]/g, '');
});

// 手机号输入限制：仅允许0-9数字
document.getElementById('phone').addEventListener('input', function() {
  // 自动过滤非数字字符，同时兼容输入、粘贴等多种输入场景
  this.value = this.value.replace(/[^0-9]/g, '');
});

如果不想移动代码位置，也可以把上述代码用DOM加载完成事件包裹后放到原有head的script标签内：

document.addEventListener('DOMContentLoaded', function() {
  // 把上面的两段输入限制代码放到这里面即可
});

可选优化 #

如果需要支持姓名中带少数民族名字的间隔点·，可以将姓名的正则规则调整为/[^a-zA-Z\u4e00-\u9fa5\s·]/g即可。

内容的提问来源于stack exchange，提问作者Navya Malhotra