HTML5 表单验证失败的提示语问题


Posted in HTML / CSS onJuly 13, 2017

前言

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

邮箱地址验证:
 

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

HTML5 表单验证失败的提示语问题

邮箱验证是 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>

HTML5 表单验证失败的提示语问题

问题

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

解决方案

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

oninvalid:提交的input元素的值为无效值时(这里是正则验证失败),触发

oninvalid事件。oninvalid属于Form 事件。

setCustomValidity():这个是HTML5内置的JS方法,用来自定义提示信息

原来可以通过 oninvalid 和 setCustomValidity 来自定义提示, 那这就好办了, 修改源代码如下:

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

结果:

HTML5 表单验证失败的提示语问题

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

以上所述是小编给大家介绍的HTML5 表单验证失败的提示语问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
一款利用html5和css3实现的3D立方体旋转效果教程
Apr 26 HTML / CSS
HTML+CSS3 模仿Windows7 桌面效果
Jun 17 HTML / CSS
纯CSS3制作的鼠标悬停时边框旋转
Jan 03 HTML / CSS
css3如何绘制一个圆圆的loading转圈动画
Jan 09 HTML / CSS
localStorage 设置过期时间的方法实现
Dec 21 HTML / CSS
html5调用摄像头功能的实现代码
May 07 HTML / CSS
HTML5 声明兼容IE的写法
May 16 HTML / CSS
关于HTML5你必须知道的28个新特性,新技巧以及新技术
May 28 HTML / CSS
HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍
Jan 30 HTML / CSS
html5实现移动端适配完美写法
Nov 16 HTML / CSS
详解Canvas 跨域脱坑实践
Nov 07 HTML / CSS
前端使用svg图片改色实现示例
Jul 23 HTML / CSS
HTML5地理定位_动力节点Java学院整理
Jul 12 #HTML / CSS
HTML5中input[type='date']自定义样式与日历校验功能的实现代码
Jul 11 #HTML / CSS
html5组织内容_动力节点Java学院整理
Jul 10 #HTML / CSS
html5页面结构_动力节点Java学院整理
Jul 10 #HTML / CSS
HTML5单页面手势滑屏切换原理分析
Jul 10 #HTML / CSS
HTML5中图片之间的缝隙完美解决方法
Jul 07 #HTML / CSS
html5是什么_动力节点Java学院整理
Jul 07 #HTML / CSS
You might like
Codeigniter中mkdir创建目录遇到权限问题和解决方法
2014/07/25 PHP
PHP中实现Bloom Filter算法
2015/03/30 PHP
PHP编程开发怎么提高编程效率 提高PHP编程技术
2015/11/09 PHP
ThinkPHP中Common/common.php文件常用函数功能分析
2016/05/20 PHP
由Javascript实现的页面日历
2011/11/04 Javascript
js动态设置鼠标事件示例代码
2013/10/30 Javascript
阻止事件(取消浏览器对事件的默认行为并阻止其传播)
2013/11/03 Javascript
javascript中实现兼容JAVA的hashCode算法代码分享
2020/08/11 Javascript
js实现兼容性好的微软官网导航下拉菜单效果
2015/09/07 Javascript
浅谈Nodejs观察者模式
2015/10/13 NodeJs
学习Node.js模块机制
2016/10/17 Javascript
正则 js分转元带千分符号详解
2017/03/08 Javascript
详解Vue 实例中的生命周期钩子
2017/03/21 Javascript
ReactJs实现树形结构的数据显示的组件的示例
2017/08/18 Javascript
vue 微信授权登录解决方案
2018/04/10 Javascript
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
2019/06/03 Javascript
[01:20:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第四场 8.26
2018/08/30 DOTA
Python3 模块、包调用&amp;路径详解
2017/10/25 Python
Python实现模拟浏览器请求及会话保持操作示例
2018/07/30 Python
微信小程序python用户认证的实现
2019/07/29 Python
Win10环境python3.7安装dlib模块趟过的坑
2019/08/01 Python
Python使用字典实现的简单记事本功能示例
2019/08/15 Python
Tensorflow实现在训练好的模型上进行测试
2020/01/20 Python
使用Python打造一款间谍程序的流程分析
2020/02/21 Python
分享全球十款超强HTML5开发工具
2014/05/14 HTML / CSS
HTML5获取当前地理位置并在百度地图上展示的实例
2020/07/10 HTML / CSS
jurlique茱莉蔻英国官网:澳洲天然护肤品
2018/08/03 全球购物
培训主管岗位职责
2014/02/01 职场文书
党员自我批评与反省材料
2014/02/10 职场文书
关于美容院的活动方案
2014/08/14 职场文书
中秋晚会活动方案
2014/08/31 职场文书
晚会开幕词
2015/01/28 职场文书
2015年社区中秋节活动总结
2015/03/23 职场文书
2019年年中工作总结讲话稿模板
2019/03/25 职场文书
MySQL kill不掉线程的原因
2021/05/07 MySQL
Nginx速查手册及常见问题
2022/04/07 Servers