<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>建议自定义错误提示示例</title>
  <style>
    input:invalid {
      border: 2px dashed red;
    }

    input:valid {
      border: 2px solid black;
    }
  </style>
</head>

<body>
  <form>
    <label for="mail">请提供电子邮件地址:</label>
    <input type="email" id="mail" name="mail">
    <button>提交</button>
  </form>

  <script>
    const email = document.getElementById("mail");

    email.addEventListener("input", function (event) {
      if (email.validity.typeMismatch) {
        email.setCustomValidity("请输入有效的电子邮件地址。");
      } else {
        email.setCustomValidity("");
      }
    });
  </script>
</body>

</html>
