使用jQuery制作手机号输入掩码，如何通过数组优化禁止0开头的校验代码

你原有代码中的大量重复分支判断完全可以简化，无需逐个枚举合法的开头数字，也可根据需求选择用数组管理合法号段，优化后代码如下：

优化后代码 #

JavaScript #

// 提前缓存错误提示元素，避免每次触发事件重复查询DOM
const phoneErrorEl = document.getElementById("PhoneError");
const inputMask = () => '(00) 0 0000-0000';
const noZero = {
  onKeyPress: function(val, e, field, options) {
    const curVal = field.val();
    // 输入长度不足2位或者(后第一位不是0，均清空错误提示
    if (curVal.length < 2 || curVal[1] !== '0') {
      phoneErrorEl.innerHTML = '';
    }
    // 匹配到(0开头的非法输入，触发错误提示并修正输入值
    if (curVal === '(0') {
      phoneErrorEl.innerHTML = '请勿以0开头';
      field.val(curVal.slice(0, 1));
    }
    field.mask(inputMask.apply({}, arguments), options);
  }
};

$("input[type='tel']").mask(inputMask, noZero);

HTML（无修改） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.11/jquery.mask.min.js"></script>
<input type="tel" id="tel" placeholder="tel">
<div id="PhoneError" style="color:red"></div>

优化说明 #

• 去掉了10余行重复的分支判断，仅用2个条件覆盖所有场景，代码量大幅缩减
• 提前缓存DOM元素，减少重复DOM查询的性能损耗
• 逻辑扩展性更强，后续调整规则无需大量修改代码

数组实现号段判断方案 #

如果你需要用数组管理合法开头号段（比如后续要限制仅允许13、15等号段开头），可以参考如下写法：

const phoneErrorEl = document.getElementById("PhoneError");
// 用数组存储所有允许的开头数字
const allowedFirstNums = ['1','2','3','4','5','6','7','8','9'];
const inputMask = () => '(00) 0 0000-0000';
const noZero = {
  onKeyPress: function(val, e, field, options) {
    const curVal = field.val();
    if (curVal.length < 2 || allowedFirstNums.includes(curVal[1])) {
      phoneErrorEl.innerHTML = '';
    } else {
      phoneErrorEl.innerHTML = '请勿以0开头';
      field.val(curVal.slice(0, 1));
    }
    field.mask(inputMask.apply({}, arguments), options);
  }
};

$("input[type='tel']").mask(inputMask, noZero);

内容的提问来源于stack exchange，提问作者Emmanuel Lima