h5 新增的invalid事件，貌似有很大bug
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
form{
width: 640px;
margin:0 auto;
}
input{
display: block;
width: 100%;
height: 25px;
margin-bottom:20px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>表单</legend>
<!--<label>
用户名：<input type="text" name="username" class="username"/>
</label>-->
<label>
tel：<input type="tel" name="tel" class="tel" pattern="^1[0-9]{10}$"/>
</label>
<input type="submit" value="提交数据" id="submit"/>
</fieldset>
</form>
<script>
var userName=document.querySelector('.username');
var tel=document.querySelector('.tel');
function fn(){
console.log(typeof this.value);
this.setCustomValidity('输入格式有误，11位数字！');//此处必须指定为this
}
tel.addEventListener('invalid',fn)
</script>
</body>
</html>
bug: 当第一次输入的电话号码不正确的时候，不刷新页面，输入正确的电好号码， 还是不断提示验证不通过，，除非刷新页面，第一次就直接输入正常电话号码，就不会触发invalid事件
h5 新增的invalid事件，貌似有很大bug的更多相关文章
- H5 新增表单属性和事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- H5新增特性
1.pattern:写正则,但是需要和form表单连着用 2.WebSocket "网络套接字", 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议.在 W ...
- web语义化与h5新增标签
Web语义化就是html告诉我们也告诉机器这一块是什么内容,例如:“这行是一个标题,这几行组成一个段落,这是一个列表,那是一个链接.” Web语义化有三个阶段: 1.h1~h6.thead.ul. ...
- H5新增属性classList
H5新增属性classList h5中新增了一个classList,原生js可以通过它来判断获取dom节点有无某个class. classList是html元素对象的成员,它的使用非常简单,比如 co ...
- h5新增html标签语义
H5新增常用标签<body> <header>...</header> <nav>...</nav> <article> < ...
- HTML5 新增的 input 事件
以往 HTML 的 input 輸入框,無法即時反映使用者的輸入內容.onkeyup.onkeydown 事件,無法即時.精確地取得使用者的輸入資料:而 onchange.onblur 事件,要等到失 ...
- 把H5打包成IOS APP其实可以很简单！签名？越狱？都不需要！
很多小伙伴都在开发自己的app, 有的实现实现比较简单,就是一个h5页面,然后想要打包成app发布出去. 这个想法很单纯 打包生成个app这个是很简单的,网上一堆打包工具,分分钟可以完成 BUT…… ...
- h5新增标签及css3新增属性
- h5新增的标签 新增元素 说明 video 表示一段视频并提供播放的用户界面 audio 表示音频 canvas 表示位图区域 source 为video和audio提供数据源 track 为vi ...
- H5做的商城客户端，效果很不错
H5做的商城客户端,效果很不错 H5做的商城客户端,效果和android原生客户端没多大区别,现在h5是越来越火了, android的小伙伴们又遇到一个新的挑战了.本项目只能学习一下WebViewAc ...
随机推荐
- Nginx教程(一) Nginx入门教程
Nginx教程(一) Nginx入门教程 1 Nginx入门教程 Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,并在一个BSD-like协议下发行.由 ...
- 《JAVA与模式》之命令模式
在阎宏博士的<JAVA与模式>一书中开头是这样描述命令(Command)模式的: 命令模式属于对象的行为模式.命令模式又称为行动(Action)模式或交易(Transaction)模式. ...
- javaWeb学习总结（8）- JSP属性范围(5)
所谓的属性范围就是一个属性设置之后,可以经过多少个其他页面后仍然可以访问的保存范围. 一.JSP属性范围 JSP中提供了四种属性范围,四种属性范围分别指以下四种: 当前页:一个属性只能在一个页面中取得 ...
- JS Event事件流（冒泡机制、捕获机制、事件绑定）
1.事件流 事件流:从页面中接收事件的顺序.也就是说当一个事件产生时,这个事件的传播过程,就是事件流. IE的事件流 IE中的事件流叫事件冒泡:事件冒泡:事件开始时由最具体的元素接收,然后逐级向上传播 ...
- [原创]nagios搭建配置
nagios搭建配置 一.环境 ubuntu 14.04系统 host1:172.17.0.2 serverhost2:172.17.0.3 client 二.安装 1.在两个主机上都执行一下命令: ...
- LVM学习
LVM Logical Volume Manager Volume management creates a layer of abstraction over physical storage, a ...
- 可视化Git版本管理工具SourceTree的使用
最近去了新公司,发现公司使用的团队版本管理工具是SourceTree,本人一直是SVN的热衷粉,很少使用git,所以从头学习git及可视化客户端SourceTree的使用,本贴只针对新手,大牛可以无视 ...
- 未能加载文件或程序集Newtonsoft.Json, Version=4.5.0.0
1.打开 程序管理器控制台 输入 PM> install-package newtonsoft.json 2.查看bin文件中是否有 newtonsoft.json.dll文件 3.在Web. ...
- MVC+Bootstrap+Drapper使用PagedList.Mvc支持多查询条件分页
前几天做一个小小小项目,使用了MVC+Bootstrap,以前做分页都是异步加载Mvc部分视图的方式,因为这个是小项目,就随便一点.一般的列表页面,少不了有查询条件,下面分享下Drapper+Page ...
- 【小练习06】HTML+CSS--电影公告
要求实现如下效果图: 代码演示 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...