网站表单自动填充跳过验证与格式化问题求助

你的问题核心是自动填充不会触发按键类事件，而且部分浏览器自动填充后不会立刻触发常规的input/change事件，导致格式化脚本和验证规则没生效。另外注意你代码里的setCsutomValidity是拼写错误，应该是setCustomValidity，这个小问题也会导致验证逻辑异常。

给你几个实用的解决办法：

1. 把格式化逻辑绑定到input事件 #

keydown只在手动按键时触发，换成input事件可以覆盖手动输入、粘贴、自动填充等所有内容变更场景：

<input type="text" 
       class="form-control phone-number" 
       id="phone-number" 
       pattern="[1-9]{1}[0-9]{9}" 
       maxlength="14" 
       name="phone" 
       placeholder="*Phone Example: ###-###-####"
       oninput="phoneNumberFormatter(); setCustomValidity('')"
       oninvalid="this.setCustomValidity('Not Valid')"
       onchange="try{setCustomValidity('')}catch(e){}"
       required>

2. 适配Chrome系浏览器的自动填充事件 #

Chrome和Edge这类webkit内核浏览器，自动填充后会触发webkitFillAvailable事件，可以专门监听这个事件来处理格式化：

// 给手机号输入框绑定webkitFillAvailable事件
document.getElementById('phone-number').addEventListener('webkitFillAvailable', function() {
  phoneNumberFormatter();
  // 触发一次验证
  this.checkValidity();
});

3. 表单提交前兜底校验 #

在表单的submit事件里强制执行一次格式化和验证，确保无论什么场景都能触发规则：

document.querySelector('form').addEventListener('submit', function(e) {
  const phoneInput = document.getElementById('phone-number');
  // 先格式化
  phoneNumberFormatter.call(phoneInput);
  // 再校验
  if (!phoneInput.checkValidity()) {
    e.preventDefault();
    phoneInput.reportValidity();
  }
});

额外提示 #

你的pattern规则是[1-9]{1}[0-9]{9}，但格式化后是带横杠的（比如123-456-7890），这时候pattern会匹配失败，因为横杠不在规则里。要么把pattern改成适配格式化后的格式（比如[1-9]\d{2}-\d{3}-\d{4}），要么在验证前先把输入框里的横杠去掉再校验。

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