<!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. struts2.1.6教程四_2、ActionContext 、ValueStack 、Stack Context

    ActionContext 一次Action调用都会创建一个ActionContext 调用:ActionContext context = ActionContext.getContext() Va ...

  2. R语言快速深度学习进行回归预测(转)

    深度学习在过去几年,由于卷积神经网络的特征提取能力让这个算法又火了一下,其实在很多年以前早就有所出现,但是由于深度学习的计算复杂度问题,一直没有被广泛应用. 一般的,卷积层的计算形式为: 其中.x分别 ...

  3. C语言之函数

    函数:为了完成某一项功能而编写的代码的集合. C语言中的函数可以分为内置和自定函数. 内置函数:C语言中已经定义过的函数,不需要 声明,可以直接调用. 常见的内置函数: 函数名 类库 说明 doubl ...

  4. python学习第三个坑

    ##########################python 第三章 ################################这一章呢,主要是文件的操作,还有涉及到函数的一部分. PS:整 ...

  5. firstChild,lastChild,nextSibling,previousSibling & 兼容性写法

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

  6. java并发编程(Exchanger)

    package org.bianqi.demo1; import java.util.concurrent.Exchanger; import java.util.concurrent.Executo ...

  7. js的函数返回值

    今天从跟公司牛人那学到的~避免以后忘了赶快记录下来 平时JS的function的返回值可以是一个数值,也可以是一个对象({name:abc,age:123}),更可以是一个函数(这里我是第一次听说), ...

  8. jsonp跨域再谈

    昨天面试雷锋网,问到了jsonp跨域的问题,其实这个问题之前就会的,没有多大的深入,记得有一个名词在跨域中出现,就是同源机制, JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在J ...

  9. 【毕业设计】基于Android的家校互动平台开发(内含完整代码和所有文档)——爱吖校推(你关注的,我们才推)

    ☆ 写在前面 之前答应大家的毕业答辩之后把所有文档贡献出来,现在答辩已过,LZ信守承诺,把所有文档开源到了GitHub(这个地址包含所有的代码和文档以及PPT,外层为简单的代码).还望喜欢的朋友们,不 ...

  10. 给Linux系统/网络管理员准备的Nmap命令的29个实用范例

    我将用两个不同的部分来涵盖大部分NMAP的使用方法,这是nmap关键的第一部分.在下面的设置中,我使用两台已关闭防火墙的服务器来测试Nmap命令的工作情况. 192.168.0.100 – serve ...