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自定义滚动条样式写法
Dec 25 HTML / CSS
CSS3 优势以及网页设计师如何使用CSS3技术
Jul 29 HTML / CSS
CSS3 Pie工具推荐--让IE6-8支持一些优秀的CSS3特性
Sep 02 HTML / CSS
纯css3制作网站后台管理面板
Dec 30 HTML / CSS
css3加js做一个简单的3D行星运转效果实例代码
Jan 18 HTML / CSS
css3实现蒙版弹幕功能
Jun 18 HTML / CSS
基于 HTML5 WebGL 实现的垃圾分类系统
Oct 08 HTML / CSS
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
Jan 09 HTML / CSS
5个你不知道的HTML5的接口介绍
Aug 07 HTML / CSS
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
Feb 28 HTML / CSS
带你了解CSS基础知识,样式
Jul 21 HTML / CSS
HTML中的表单元素介绍
Feb 28 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
使用swoole扩展php websocket示例
2014/02/13 PHP
PHP异常处理浅析
2015/05/12 PHP
PHP魔术方法以及关于独立实例与相连实例的全面讲解
2016/10/18 PHP
Javascript - HTML的request类
2007/01/09 Javascript
jquery 读取页面load get post ajax 四种方式代码写法
2011/04/02 Javascript
使用JQuery和CSS模拟超链接的用户单击事件的实现代码
2012/05/23 Javascript
JS等比例缩小图片尺寸的实例
2013/02/27 Javascript
[JSF]使用DataModel处理表行事件的实例代码
2013/08/05 Javascript
带左右箭头图片轮播的JS代码
2013/12/18 Javascript
JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)
2014/01/11 Javascript
js实现图片淡入淡出切换简易效果
2016/08/22 Javascript
VUE + UEditor 单图片跨域上传功能的实现方法
2018/02/08 Javascript
详解vue移动端项目的适配(以mint-ui为例)
2018/08/17 Javascript
解决vue 打包发布去#和页面空白的问题
2018/09/04 Javascript
解决vue v-for src 图片路径问题 404
2019/11/12 Javascript
Vue双向绑定实现原理与方法详解
2020/05/07 Javascript
解决js中的setInterval清空定时器不管用问题
2020/11/17 Javascript
jQuery实现穿梭框效果
2021/01/19 jQuery
python3实现ftp服务功能(服务端 For Linux)
2017/03/24 Python
简单谈谈Python中的json与pickle
2017/07/19 Python
Python实现的多线程同步与互斥锁功能示例
2017/11/30 Python
Python使用Django实现博客系统完整版
2020/09/29 Python
python名片管理系统开发
2020/06/18 Python
聊聊python中的异常嵌套
2020/09/01 Python
基于HTML5的WebGL经典3D虚拟机房漫游动画
2017/11/15 HTML / CSS
俄罗斯一家时尚女装商店:Charuel
2019/12/04 全球购物
南京软件公司的.net程序员笔试题
2014/08/31 面试题
妈妈的账单教学反思
2014/02/06 职场文书
就业推荐表自我鉴定
2014/03/21 职场文书
给老婆的检讨书
2015/01/27 职场文书
护理专业自荐信范文
2015/03/06 职场文书
教师“一帮一”结对子活动总结
2015/05/07 职场文书
小学音乐课歌曲《堆雪人》教学反思
2016/02/18 职场文书
财务会计个人原因辞职信
2019/06/21 职场文书
Redis持久化与主从复制的实践
2021/04/27 Redis
在Java中Collection的一些常用方法总结
2021/06/13 Java/Android