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 相关文章推荐
CSS3实现的闪烁跳跃进度条示例(附源码)
Aug 19 HTML / CSS
一款恶搞头像特效的制作过程 利用css3和jquery
Nov 21 HTML / CSS
HTML5新表单元素_动力节点Java学院整理
Jul 12 HTML / CSS
Html5剪切板功能的实现代码
Jun 29 HTML / CSS
html5中为audio标签增加停止按钮动作实现方法
Jan 04 HTML / CSS
html5适合移动应用开发的12大特性
Mar 19 HTML / CSS
使用HTML5在网页中嵌入音频和视频播放的基本方法
Feb 22 HTML / CSS
通过HTML5 Canvas API绘制弧线和圆形的教程
Mar 14 HTML / CSS
使用html2canvas.js实现页面截图并显示或上传的示例代码
Dec 18 HTML / CSS
html2 canvas生成清晰的图片实现打印功能
Sep 23 HTML / CSS
html5 移动端视频video的android兼容(去除播放控件、全屏)
Mar 26 HTML / CSS
uniapp+Html5端实现PC端适配
Jul 15 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
隐藏你的.php文件的实现方法
2007/03/19 PHP
使用php来实现网络服务
2009/09/15 PHP
php获取网页标题和内容函数(不包含html标签)
2014/02/03 PHP
php合并数组中相同元素的方法
2014/11/13 PHP
PHP生成随机数的方法实例分析
2015/01/22 PHP
php检查字符串中是否有外链的方法
2015/07/29 PHP
php一个文件搞定微信jssdk配置
2016/12/12 PHP
用jQuery简化JavaScript开发分析
2009/02/19 Javascript
javascript控制frame,iframe的src属性代码
2009/12/31 Javascript
基于jquery实现一张图片点击鼠标放大再点缩小
2013/09/29 Javascript
常用的jQuery前端技巧收集
2014/12/24 Javascript
javascript操作ul中li的方法
2015/05/14 Javascript
jQuery代码实现发展历程时间轴特效
2015/07/30 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
2015/10/26 Javascript
label+input实现按钮开关切换效果的实例
2017/08/16 Javascript
Vue项目组件化工程开发实践方案
2018/01/09 Javascript
如何去除vue项目中的#及其ie9兼容性
2018/01/11 Javascript
使用D3.js构建实时图形的示例代码
2018/08/28 Javascript
vue中的ref和$refs的使用
2018/11/22 Javascript
微信小程序 腾讯地图显示偏差问题解决
2019/07/27 Javascript
react实现antd线上主题动态切换功能
2019/08/12 Javascript
小程序瀑布流组件实现翻页与图片懒加载
2020/05/19 Javascript
Python合并两个字典的常用方法与效率比较
2015/06/17 Python
python查看FTP是否能连接成功的方法
2015/07/30 Python
利用python编写一个图片主色转换的脚本
2017/12/07 Python
python递归调用中的坑:打印有值, 返回却None
2020/03/16 Python
css3实现的多级渐变下拉菜单导航效果代码
2015/08/31 HTML / CSS
南京软件公司的.net程序员笔试题
2014/08/31 面试题
诚信的演讲稿范文
2014/05/12 职场文书
家长会感言
2015/08/01 职场文书
幼儿园奖惩制度范本
2015/08/05 职场文书
2016中秋节晚会开场白
2015/11/26 职场文书
教师个人教学反思
2016/02/23 职场文书
详解JS ES6编码规范
2021/05/07 Javascript
css3中2D转换之有趣的transform形变效果
2022/02/24 HTML / CSS
golang实现浏览器导出excel文件功能
2022/03/25 Golang