使用Constraint Validation API时无法调用validity.typeMismatch属性的问题

问题原因 #

• HTML5 email输入框默认验证规则宽松：浏览器对<input type="email">的默认验证仅要求输入包含@符号且前后有字符（比如a@b会被判定为有效），这导致很多你认为不符合格式的内容，浏览器不会触发typeMismatch。
• 其他约束优先级干扰：你给输入框设置了minlength="10"和required，当输入为空时会触发valueMissing，输入长度不足10时会触发tooShort，这两种情况下typeMismatch不会被触发，因为已有其他验证错误存在。

解决方案 #

1. 测试typeMismatch的正确场景 #

如果只是想验证typeMismatch是否生效，可以输入完全不含@的内容（比如testexample），此时浏览器会判定格式不匹配，typeMismatch会变为true，你的原代码会正常显示自定义提示。

2. 加强邮箱验证规则（推荐） #

若需要更严格的邮箱格式验证，可以给输入框添加pattern属性，用正则表达式定义更精准的规则，结合typeMismatch和patternMismatch来处理错误：

修改后的HTML

<body>
  <form>
    <label for="mail">请提供你的电子邮箱地址:</label>
    <input type="email" id="mail" name="mail" minlength="10" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
    <button>提交</button>
  </form>
</body>

修改后的JavaScript

const email = document.getElementById("mail");

email.addEventListener("input", (event) => {
  // 依次处理不同的验证错误
  if (email.validity.valueMissing) {
    email.setCustomValidity("请填写邮箱地址");
  } else if (email.validity.tooShort) {
    email.setCustomValidity(`邮箱长度不能少于${email.minLength}个字符`);
  } else if (email.validity.typeMismatch || email.validity.patternMismatch) {
    email.setCustomValidity("请输入有效的邮箱地址");
  } else {
    // 必须清空自定义提示，否则输入正确时仍会被标记为无效
    email.setCustomValidity("");
  }
});

3. 关键注意事项 #

• setCustomValidity("")必须在输入合法时执行，否则即使输入符合要求，输入框仍会被判定为无效。
• ValidityState对象可能同时存在多个验证错误，但浏览器会优先显示第一个触发的错误提示，因此代码中需要按优先级依次判断。

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