如何通过正则表达式禁止用户输入0？现有pattern校验不生效

现有代码不生效是三个原因导致的：

• pattern属性写法错误：HTML原生pattern属性值直接写正则字符串即可，不需要加正则字面量的包裹斜杠/，也不需要全局匹配标志g，多余符号会导致正则校验规则完全失效。
• 属性冲突：input标签设置了min="0"，原生数字输入规则本身允许0值通过校验，和禁止输入0的需求直接冲突。
• 校验时机不对：原生pattern属性仅在表单提交时触发校验，不会在用户输入过程中实时拦截内容，所以输入过程中输入0不会被即时阻止。

1. 修正HTML输入框属性 #

把原有input标签替换为以下代码，修正pattern写法、调整最小值限制：

<input pattern="^[1-9]\d*$" id="num-input" type="number" min="1" class="form-control number" placeholder="Input numbers here" aria-label="Input number here" aria-describedby="btn-generate">

2. 增加JS实时拦截+兜底校验 #

光靠HTML属性无法实现输入过程中的实时拦截，需要在JS里增加输入监听，同时在业务函数里加校验兜底，防止校验被绕过：

// 输入实时拦截，禁止输入0、0开头的数字及非数字内容
$('#num-input').on('input', function() {
  const inputVal = $(this).val();
  // 过滤非法输入：移除开头所有0、移除非数字字符
  const validVal = inputVal.replace(/^0+|[^0-9]/g, '');
  $(this).val(validVal);
});

function numIntoUnits() {
  let num = $('#num-input').val();
  // 业务逻辑执行前的兜底校验
  if (!/^[1-9]\d*$/.test(num)) {
    alert('请输入大于0的正整数');
    $('#num-input').focus();
    return;
  }
  console.log(num);
  // 此处写后续单位转换的业务逻辑
}

注意：前端校验只能提升用户体验，永远不要信任前端传值，后端接口也需要增加对应参数的正整数校验，避免非法参数传入。

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