javascript - 当达到 maxlength ="11"时如何放置 HTML 验证错误？

Question

为了创建调查表，我希望我的用户能够留下他们的电话号码。荷兰的电话号码永远不会超过 10 位数字。如果是的话，我想放置一个 HTML 验证错误。

Answer 1

你绝对可以通过 CSS 来做到这一点，只需检查 :valid或:invalid伪状态与 pattern 结合适用于 <input> 的选定子集的属性元素:

input:invalid {
  color: red;
}

.error-message {
  display: none;
}
input:invalid + .error-message {
  display: inline;
  color: red;
}

<form>
  <input type="tel" pattern="\d{10}" />
  <span class="error-message">Please enter a 10-digit phone number</span>
</form>

<input> 的子集启用模式检查的元素是 text, search, tel, url, email, or password .

但是，请注意:您不应该永远依赖客户端(HTML 或 JS)作为单点验证。您仍然需要使用服务器端验证，因为 native 表单验证只是充当建议，如果用户可以访问控制台并且有一点 JS 知识，则可以轻松绕过基于 JS 的验证。