【问题标题】:HTML5 Validation - Easy Way to have real time validation?HTML5 验证 - 进行实时验证的简便方法?
【发布时间】:2013-07-15 21:47:17
【问题描述】:

我正在使用 HTML5 进行用户验证。这是我的代码的 sn-p:

<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 做到这一点。

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

【问题讨论】:

  • 使用 javascript,例如onkeyup="validateUsername(this.value)".

标签: html validation


【解决方案1】:

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

http://parsleyjs.org/

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

例如:

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

祝你好运!

【讨论】:

    【解决方案2】:

    这是一个用于 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-30
    • 2013-08-09
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-06-12
    • 2012-03-15
    • 1970-01-01
    相关资源
    最近更新 更多