HTML5 验证 - 进行实时验证的简便方法？

Question

我正在使用 HTML5 进行用户验证。这是我的代码片段:

<input type="text" name="name"  id="usernametb" title="Minimum 8 Characters, only letters 
 and numbers" pattern="^[A-Za-z0-9]{8,40}$" placeholder="Enter a Valid UserName" required />

我希望用户在键入与验证模式不匹配的用户名时或在切换到下一个字段时立即收到错误消息。有没有一种简单的方法可以用 HTML5 做到这一点。

现在，错误消息不会显示，直到我单击“提交”并强制回发。

Answer 1

我对 parsley.js 库有很好的体验:

http://parsleyjs.org/

同样对于其他输入类型(例如电话、电子邮件、URL)，html5 可以自行验证，不会修复您的示例，但它非常强大，并且在适合时是一个极其轻量级的工具。

例如:

    <input type="tel" name="cellPhone"></input>

祝你好运!