如何通过Constraint Validation API获取默认验证提示信息？

是的，你可以通过客户端JavaScript获取浏览器内置的这些默认验证提示信息，核心是利用表单元素的validationMessage属性，结合手动触发验证来获取对应场景的提示。

具体实现方法 #

• 创建对应验证场景的表单元素
  比如要获取"格式不匹配"的提示，就创建一个带pattern属性的输入框，设置一个用户无法匹配的规则，再输入不符合要求的内容：

  // 创建测试用输入元素
  const input = document.createElement('input');
  input.pattern = '^xyz$'; // 设置特定格式规则
  input.value = 'abc'; // 输入不符合规则的内容
  

• 触发验证并获取提示
  调用元素的checkValidity()方法触发验证逻辑，之后就能通过validationMessage拿到对应语言的默认提示：

  input.checkValidity();
  console.log(input.validationMessage); // 输出对应场景的默认提示，比如英文的"Please match the requested format."
  

• 获取其他验证场景的提示
  针对不同的验证错误（如必填项为空、输入超出长度范围等），只需设置对应的约束属性后重复上述步骤：

  • 必填项提示：设置required属性，让元素值为空后触发验证
  • 长度超限提示：设置maxlength属性，输入超过长度的内容后触发验证

注意事项 #

• 这些提示会根据浏览器的语言设置自动翻译，无需额外处理多语言逻辑
• 测试时要确保元素没有调用setCustomValidity()，否则会覆盖默认提示

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