如何实现房屋地址输入框前3位为数字加空格的输入格式限制

实现方案 #

你可以通过HTML原生属性校验+JavaScript实时拦截两种方式实现需求，以下是完整实现代码：

第一步：修正原输入框语法错误

原输入框的type属性缺少闭合引号，先修正为合法代码：

<input id="street-address" type="text" placeholder="请输入地址，示例：123 Ezra ave" name="address">

注：建议把id里的空格去掉换成横线，避免后续JS选择器报错

方案1：原生HTML表单校验（无需额外JS）

直接给input添加pattern属性指定校验规则，搭配title属性提示合法格式，表单提交时会自动触发校验：

<input 
  id="street-address" 
  type="text" 
  placeholder="请输入地址，示例：123 Ezra ave" 
  name="address"
  pattern="^\d{3} [A-Za-z ]+$"
  title="格式要求：前3位为数字，后跟空格，剩余内容仅支持字母和空格"
  required
>

正则规则说明：

• ^ 匹配字符串开头
• \d{3} 要求前3位必须是数字
• 后面跟1个半角空格
• [A-Za-z ]+ 匹配1个及以上的字母或半角空格
• $ 匹配字符串结尾

如果你实际需要适配你给出的示例“45 Ezra ave”中2位数字的场景，只需要把正则中的\d{3}修改为\d{1,3}即可，代表允许1到3位数字开头。

方案2：JavaScript实时输入拦截（边输入边校验，避免非法字符输入）

如果需要用户输入时就自动过滤不符合要求的内容，可以添加以下JS代码：

const addressInput = document.getElementById('street-address');
addressInput.addEventListener('input', function(e) {
  let val = e.target.value;
  // 前3位只能输入数字
  if (val.length <= 3) {
    val = val.replace(/[^0-9]/g, '');
  } 
  // 第4位自动补空格
  else if (val.length === 4 && val[3] !== ' ') {
    val = val.slice(0,3) + ' ' + val[3];
  }
  // 第4位之后只能输入字母和空格
  else if (val.length > 4) {
    const prefix = val.slice(0,4);
    const suffix = val.slice(4).replace(/[^A-Za-z ]/g, '');
    val = prefix + suffix;
  }
  e.target.value = val;
});

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