<!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的更多相关文章

  1. H5 新增表单属性和事件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. H5新增特性

    1.pattern:写正则,但是需要和form表单连着用 2.WebSocket "网络套接字", 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议.在 W ...

  3. web语义化与h5新增标签

    Web语义化就是html告诉我们也告诉机器这一块是什么内容,例如:“这行是一个标题,这几行组成一个段落,这是一个列表,那是一个链接.”   Web语义化有三个阶段: 1.h1~h6.thead.ul. ...

  4. H5新增属性classList

    H5新增属性classList h5中新增了一个classList,原生js可以通过它来判断获取dom节点有无某个class. classList是html元素对象的成员,它的使用非常简单,比如 co ...

  5. h5新增html标签语义

    H5新增常用标签<body> <header>...</header> <nav>...</nav> <article> < ...

  6. HTML5 新增的 input 事件

    以往 HTML 的 input 輸入框,無法即時反映使用者的輸入內容.onkeyup.onkeydown 事件,無法即時.精確地取得使用者的輸入資料:而 onchange.onblur 事件,要等到失 ...

  7. 把H5打包成IOS APP其实可以很简单！签名？越狱？都不需要！

    很多小伙伴都在开发自己的app, 有的实现实现比较简单,就是一个h5页面,然后想要打包成app发布出去. 这个想法很单纯 打包生成个app这个是很简单的,网上一堆打包工具,分分钟可以完成 BUT…… ...

  8. h5新增标签及css3新增属性

    - h5新增的标签 新增元素 说明 video 表示一段视频并提供播放的用户界面 audio 表示音频 canvas 表示位图区域 source 为video和audio提供数据源 track 为vi ...

  9. H5做的商城客户端，效果很不错

    H5做的商城客户端,效果很不错 H5做的商城客户端,效果和android原生客户端没多大区别,现在h5是越来越火了, android的小伙伴们又遇到一个新的挑战了.本项目只能学习一下WebViewAc ...

随机推荐

  1. java.util.Properties类 学习笔记

    学习目标:   1.认识properties文件,理解其含义,会正确创建properties文件. 2.会使用java.util.Properties类来操作properties文件. 3.掌握相对路 ...

  2. js继承之借用构造函数继承

    我的上一篇文章介绍了,原型链继承模式.但是单纯的原型链模式并不能很好地实现继承. 一.原型链的缺点 1.1 单纯的原型链继承最大的一个缺点,来自于原型中包含引用类型的值. 本来,我们没有通过原型链实现 ...

  3. 实现分布式队列ZooKeeper的实现

    一.背景 有一些时候,多个团队需要共同完成一个任务,比如,A团队将Hadoop集群计算的结果交给B团队继续计算,B完成了自己任务再交给C团队继续做.这就有点像业务系统的工作流一样,一环一环地传下去,直 ...

  4. Python爬虫学习(二) ——————爬取前程无忧招聘信息并写入excel

    作为一名Pythoner,相信大家对Python的就业前景或多或少会有一些关注.索性我们就写一个爬虫去获取一些我们需要的信息,今天我们要爬取的是前程无忧!说干就干!进入到前程无忧的官网,输入关键字&q ...

  5. 使用ConcurrentDictionary替代Hashtable对多线程的对象缓存处理

    在之前一段时间里面,我的基类多数使用lock和Hashtable组合实现多线程内缓存的冲突处理,不过有时候使用这两个搭配并不尽如人意,偶尔还是出现了集合已经加入的异常,对代码做多方的处理后依然如故,最 ...

  6. 【Python3之常用模块】

    一.time 1.三种表达方式 在Python中,通常有这几种方式来表示时间: 时间戳(timestamp):通常来说,时间戳表示的是从1970年1月1日00:00:00开始按秒计算的偏移量.命令如下 ...

  7. Bootstrap & 响应式

    要了解一个东西 就是要知道 它是什么? 干什么 ? 怎么用 ? 1.Bootstrap 简介   Bootstrap 是由Twitter(著名的社交网站)推出的前端开源工具包,它基于Html.CSS. ...

  8. lucene全文搜索之三：生成索引字段，创建索引文档（给索引字段加权）基于lucene5.5.3

    前言:上一章中我们已经实现了索引器的创建,但是我们没有索引文档,本章将会讲解如何生成字段.创建索引文档,给字段加权以及保存文档到索引器目录 luncene5.5.3集合jar包下载地址:http:// ...

  9. Java程序设计环境概述

    本文主要Java程序设计环境的要点,以及相关注意事项. 一.安装Java开发包 Oracle公司为Linux.Mac OS X.Solaris和Windows提供了Java开发工具包(JDK)的最新. ...

  10. STL的空间配置器std_alloc 笔记

    STL的空间配置器std_alloc 笔记 C++的内存分配基本操作是 ::operator new(),内存释放是 ::operator delete(),这里个全局函数相当于C的malloc和fr ...