如何翻译HTML5 step属性验证报错并保留动态生成的最近有效值提示

我在使用带有min、max、step属性的HTML5 number类型输入框时，遇到了默认验证报错信息的翻译问题：

<input type="number" min="2" max="20" step="2" >

该输入框允许的合法值为2、4、6……以此类推。当用户输入介于min和max之间的非法值时，默认HTML5验证会弹出报错提示，告知用户两个最近的合法值，示例报错内容为：展示的错误信息："Please enter a valid value. The two nearest valid values are 14 and 16."

我需要将该提示翻译为德语，查阅了现有公开解决方案，通用做法是使用setCustomValidity()方法设置自定义提示，但该方法会覆盖整条默认信息，导致无法保留原提示中动态生成的两个最近合法值，目前仅能展示固定翻译内容：展示的错误信息："Bitte geben sie einen gültigen Wert ein."

我已经测试了两种常规实现方案，请问如何才能实现德语翻译的同时保留动态的最近合法值提示？

解决方案 #

你可以通过以下两种方式实现需求，推荐使用第二种自主计算合法值的方案，兼容性更强：

• 方案1：提取默认报错信息中的动态数值
  监听输入框的invalid事件，先获取浏览器生成的默认错误消息，通过正则匹配提取两个最近合法值，再和德语固定文本拼接后设置自定义验证消息：

  const numberInput = document.querySelector('input[type="number"]');
  numberInput.addEventListener('invalid', (e) => {
    const defaultMsg = e.target.validationMessage;
    // 正则匹配提取消息末尾的两个数字
    const valueMatch = defaultMsg.match(/(\d+)\s*and\s*(\d+)/);
    if (valueMatch) {
      const [, val1, val2] = valueMatch;
      e.target.setCustomValidity(`Bitte geben sie einen gültigen Wert ein. Die zwei nächstgültigen Werte sind ${val1} und ${val2}.`);
    } else {
      // 匹配不到动态值时显示默认翻译
      e.target.setCustomValidity("Bitte geben sie einen gültigen Wert ein.");
    }
  });
  // 输入内容时清空自定义验证消息，避免重复报错
  numberInput.addEventListener('input', (e) => {
    e.target.setCustomValidity('');
  });
  

• 方案2：自主计算最近的合法值（更稳定）
  不需要依赖浏览器默认消息的格式，直接根据输入框的min、step属性计算两个最近的合法值，兼容性不受浏览器语言、版本影响：

  const numberInput = document.querySelector('input[type="number"]');
  numberInput.addEventListener('invalid', (e) => {
    const input = e.target;
    const min = Number(input.min);
    const step = Number(input.step);
    const currentVal = Number(input.value);
    // 计算比当前值小的最近合法值
    const lowerValid = min + Math.floor((currentVal - min) / step) * step;
    // 计算比当前值大的最近合法值
    const upperValid = lowerValid + step;
    input.setCustomValidity(`Bitte geben sie einen gültigen Wert ein. Die zwei nächstgültigen Werte sind ${lowerValid} und ${upperValid}.`);
  });
  numberInput.addEventListener('input', (e) => {
    e.target.setCustomValidity('');
  });
  

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