2

我正在使用 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 做到这一点。

现在,在我单击“提交”并强制回发之前,不会显示错误消息。

4

2 回答 2

0

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

http://parsleyjs.org/

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

例如:

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

祝你好运!

于 2013-07-22T22:15:57.987 回答
0

这是一个用于 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 />

快乐编码!

于 2013-07-15T21:55:17.407 回答