全国服务热线:4008-888-888

技术知识

HTML5 表单认证不成功的提醒语难题

序言

前端开发的童鞋在写网页页面时, 都不能防止的总会踩到 表单认证 这个坑. 这时候候, 大家就要跪了, 由于要写1堆 js 来查验. 可是自从 H5 出現后, 许多普遍的 表述认证 , 它都早已帮大家完成了, 让大家减轻了许多压力, 就仿佛下面的:

电子邮箱详细地址认证:
 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <title>Test</title>
</head>
<body>
    <form action="">
        <label >
            电子邮箱: <input type="email">
        </label>
        <input type="submit">
    </form>
</body>
</html>

电子邮箱认证是 H5 本身适用的, 可是大家要认证的情景和状况是多种多样多样的, 那应该怎么办? 用回 Js 吗? 很显著没这么蛋疼, 由于 H5 出示了 pattern 特性, 让大家自立更生! 大家能够在 pattern 特定正则表达式表述式, 要是正则表达式写的好, 认证就没苦恼!

正则表达式限制11位数据:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <title>Test</title>
</head>
<body>
    <form action="">
        <label >
            数据: <input type="text" pattern="^\d{11}$">
        </label>
        <input type="submit">
    </form>
</body>
</html>

难题

大伙儿能够尝试下, 在键入非11位的数据, 都会出错, 这便是 pattern 的贡献. 可是不知道道大伙儿发现了1个蛋疼的状况没? 便是假如我们应用 pattern 的方法去认证表单, 在认证不成功时, 它的提醒全是 请与所恳求的文件格式维持1致 , 我的天, 大家的客户如何了解所恳求的文件格式是甚么鬼, 总不可以让她们去看源代码吧, 要真这样, 大家连网页页面都无需写了, 立即让她们把钱给大家得了, 开个玩笑话~

处理计划方案

有难题, 我们就得处理, 在朝向谷歌程序编写好久, 终究觅得1良方:

oninvalid:递交的input元素的值为失效值时(这里是正则表达式认证不成功),开启

oninvalid恶性事件。oninvalid属于Form 恶性事件。

setCustomValidity():这个是HTML5内嵌的JS方式,用来自定提醒信息内容

原先能够根据 oninvalid 和 setCustomValidity 来自定提醒, 那这就好办了, 改动源码以下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <title>Test</title>
</head>
<body>
    <form action="">
        <label >
            数据: <input type="text" pattern="^\d{11}$" oninvalid="setCustomValidity('请键入11位数据')">
        </label>
        <input type="submit">
    </form>
</body>
</html>

結果:

终究并不是那个蛋疼的"文件格式"了, 如今表单认证提醒早已很确立的告知大家, 这里应当键入的是甚么样的数据信息, 这样客户就可以更好的改动自身的键入了!

以上所述是网编给大伙儿详细介绍的HTML5 表单认证不成功的提醒语难题,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服