H5: 表单验证失败的提示语

时间 2019-11-06

标签 h5 表单验证失败提示栏目 HTML 繁體版

原文原文链接

前言

前端的童鞋在写页面时, 都不可避免的总会踩到表单验证这个坑. 这时候, 咱们就要跪了, 由于要写一堆js来检查. 可是自从H5出现后, 不少常见的表达验证, 它都已经帮咱们实现了, 让咱们减轻了不少负担, 就好像下面的:html

邮箱地址验证:前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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-8">
    <title>Test</title>
</head>
<body>
    <form action="">
        <label >
            数字: <input type="text" pattern="^\d{11}$">
        </label>
        <input type="submit">
    </form>
</body>
</html>

问题

你们能够尝试下, 在输入非11位的数字, 都会报错, 这就是pattern的功劳. 可是不知道你们发现了一个蛋疼的现象没? 就是若是我们使用pattern的方式去验证表单, 在验证失败时, 它的提示都是请与所请求的格式保持一致, 个人天, 咱们的用户怎么知道所请求的格式是什么鬼, 总不能让他们去看源码吧, 要真这样, 咱们连页面都不用写了, 直接让他们把钱给咱们得了, 开个玩笑~segmentfault

解决方案

有问题, 我们就得解决, 在面向谷歌编程许久, 终于觅得一良方:spa

oninvalid：提交的input元素的值为无效值时（这里是正则验证失败），触发
oninvalid事件。oninvalid属于Form 事件。code
setCustomValidity()：这个是HTML5内置的JS方法，用来自定义提示信息orm

原来能够经过oninvalid和setCustomValidity来自定义提示, 那这就好办了, 修改源代码以下:htm

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

结果:blog

终于不是那个蛋疼的"格式"了, 如今表单验证提示已经很明确的告诉咱们, 这里应该输入的是什么样的数据, 这样用户就能更好的修改本身的输入了!

欢迎各位大神指点交流,转载请注明来源: https://segmentfault.com/a/11...