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的html5验证插件：http://ericleads.com/h5validate/。

来自插件网站的引用：

  

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 />

另请看这个：http://livevalidation.com/

快乐的编码！

Answer 2

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

http://parsleyjs.org/

另外对于其他输入类型（例如电话，电子邮件，URL），html5可以自行验证，不会修复你拥有的示例，但它非常强大，并且在适合的时候是一个非常轻量级的工具。

例如：

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

祝你好运！