如何修改默认表单验证消息的Locale使其始终显示英文？

可以实现，不用自定义setCustomValidity消息，只需通过设置元素的语言属性就能让浏览器默认验证消息固定显示英文，以下是具体方案：

方案1：直接在HTML中设置lang属性 #

给表单或者其包含的父元素（甚至<html>根标签）添加lang="en"属性，浏览器会优先使用该语言的验证提示，不受系统语言影响：

<!-- 给整个表单设置英文语言 -->
<form lang="en">
  <input type="email" name="email" required>
  <input type="password" name="pwd" minlength="6" required>
  <button type="submit">提交</button>
</form>

方案2：通过JavaScript动态设置 #

如果需要针对特定输入元素单独配置，可以用JS给目标元素设置lang属性，适配你提供的代码逻辑：

// 假设你的代码在表单提交事件中执行
document.querySelector('form').addEventListener('submit', (e) => {
  e.preventDefault();
  
  // 先给所有输入/文本域设置英文语言
  [...e.currentTarget.elements].forEach(el => {
    if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) {
      el.lang = 'en';
    }
  });

  // 然后执行你原本的验证消息收集逻辑
  const errors = [...e.currentTarget.elements].reduce((acc, el) => {
    if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement)
      if (el.validationMessage)
        return { ...acc, [el.name]: el.validationMessage };

    return acc;
  }, {});

  console.log(errors); // 这里会输出英文的默认验证消息
});

原理说明 #

浏览器的表单默认验证消息会优先遵循元素或其祖先元素的lang属性设定，而非浏览器的系统语言。只要把目标元素的语言指定为英文，就能直接调用浏览器自带的英文验证提示，完全不需要自定义消息内容。

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