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

这是一个用于jquery：http://ericleads.com/h5validate/的html5验证插件。

引用自插件网站：

针对jQuery的实时HTML5表单验证的最佳实践。适用于所有流行的浏览器，包括像IE6这样的旧浏览器。

如果你想使用你自己的javascript，使用如下代码：

onkeyup="validateUsername(this)"

…举个例子：

<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" onkeyup="validateUsername(this)" required />

祝你编码愉快！

Answer 2

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

http://parsleyjs.org/

此外，对于其他输入类型(如电话，电子邮件，网址)，html5可以自己验证，不会修复你的示例，但它非常强大，当它合适时，它是一个疯狂的轻量级工具。

例如：

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

祝好运!