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实现带动画效果导航菜单无需js
Sep 27 HTML / CSS
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
Jul 21 HTML / CSS
可自定义箭头样式的CSS3气泡提示框
Mar 16 HTML / CSS
CSS 3.0文字悬停跳动特效代码
Oct 26 HTML / CSS
HTML5引入的新数组TypedArray介绍
Dec 24 HTML / CSS
html5基础标签(html5视频标签 html5新标签用法)
Dec 30 HTML / CSS
HTML5中meta属性的使用方法
Feb 29 HTML / CSS
html5默认气泡修改的代码详解
Mar 13 HTML / CSS
HTML5 图片预加载的示例代码
Mar 25 HTML / CSS
HTML5输入框下拉菜单功能的示例代码
Sep 08 HTML / CSS
html table呈现个人简历以及单元格宽度失效的问题解决
Jan 22 HTML / CSS
css3实现背景图片半透明内容不透明的方法示例
Apr 13 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+Ajax实现唯一校验实现代码[简单应用]
2011/11/29 PHP
深入理解:单一入口、MVC、ORM、CURD、ActiveRecord概念
2013/06/06 PHP
通过php删除xml文档内容的方法
2015/01/23 PHP
PHP实现简单的模板引擎功能示例
2017/09/02 PHP
利用php + Laravel如何实现部署自动化详解
2017/10/11 PHP
php使用json-schema模块实现json校验示例
2019/09/28 PHP
清华大学出版的事半功倍系列 javascript全部源代码
2007/05/04 Javascript
Whatever:hover 无需javascript让IE支持丰富伪类
2010/06/29 Javascript
基于jquery的兼容各种浏览器的iframe自适应高度的脚本
2010/08/13 Javascript
jQuery控制TR显示隐藏的几种方法
2014/06/18 Javascript
js文件包含的几种方式介绍
2014/09/28 Javascript
javascript制作幻灯片(360度全景图片)
2015/07/28 Javascript
jQuery+css实现的蓝色水平二级导航菜单效果代码
2015/09/11 Javascript
JS简单循环遍历json数组的方法
2016/04/22 Javascript
深入浅析JavaScript中的arguments对象(强力推荐)
2016/06/03 Javascript
JavaScript中获取HTML元素值的三种方法
2016/06/20 Javascript
jquery dataview数据视图插件使用方法
2016/12/23 Javascript
php 修改密码实现代码
2017/05/24 Javascript
JS 60秒后重新发送验证码的实例讲解
2017/07/26 Javascript
tangram.js库实现js类的方式实例分析
2018/01/06 Javascript
微信小程序一周时间表功能实现
2019/10/17 Javascript
JS实现水平移动与垂直移动动画
2019/12/19 Javascript
vue实现把接口单独存放在一个文件方式
2020/08/13 Javascript
[13:38]2015国际邀请赛中国战队出征仪式
2015/05/29 DOTA
python实现linux下使用xcopy的方法
2015/06/28 Python
为何人工智能(AI)首选Python?读完这篇文章你就知道了(推荐)
2019/04/06 Python
python实现简单聊天室功能 可以私聊
2019/07/12 Python
Python 格式化打印json数据方法(展开状态)
2020/02/27 Python
python Matplotlib模块的使用
2020/09/16 Python
英国著名国际平价时尚男装品牌:Topman
2016/08/27 全球购物
Easy Spirit官网:美国休闲鞋履中的代表品牌
2019/04/12 全球购物
迪士尼西班牙官方网上商店:ShopDisney西班牙
2020/02/02 全球购物
《七月的天山》教学反思
2016/02/19 职场文书
Python入门之使用pandas分析excel数据
2021/05/12 Python
.Net Core导入千万级数据至Mysql的步骤
2021/05/24 MySQL
python图片灰度化处理的几种方法
2021/06/23 Python