<!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. python爬虫从入门到放弃（三）之 Urllib库的基本使用

    官方文档地址:https://docs.python.org/3/library/urllib.html 什么是Urllib Urllib是python内置的HTTP请求库包括以下模块urllib.r ...

  2. mxnet：结合R与GPU加速深度学习（转）

    近年来,深度学习可谓是机器学习方向的明星概念,不同的模型分别在图像处理与自然语言处理等任务中取得了前所未有的好成绩.在实际的应用中,大家除了关心模型的准确度,还常常希望能比较快速地完成模型的训练.一个 ...

  3. rownum基本用法

    对于rownum来说它是oracle系统顺序分配为从查询返回的行的编号,返回的第一行分配的是1,第二行是2,依此类推,这个伪字段可以用于限制查询返回的总行数,且rownum不能以任何表的名称作为前缀. ...

  4. Web缓存相关知识整理

    一.前言  工作上遇到一个这样的需求,一个H5页面在APP端,如果勾选已读状态,则下次打开该链接,会跳过此页面.用到了HTML5 的本地存储 API 中的 localStorage作为解决方案,回顾了 ...

  5. python 2.7中urllib 2 与python 3.5中 urllib的区别。

    python 3.x中urllib库和urilib2库合并成了urllib库. 其中urllib2.urlopen()变成了urllib.request.urlopen() urllib2.Reque ...

  6. java数据结构(二叉树)

    Node节点: public class Node { public long data; public String sData; public Node leftChild; public Nod ...

  7. cpp(第十一章)

    1. std::istream & operator>>(std::istream &is,complex_c &t) { std::cout<<&qu ...

  8. pb传输优化浅谈

    在正式切入今天要谈的优化之前,先碎碎念一些自己过去这几年的经历.很久没有登录过博客园了,今天也是偶然兴起打开上来看一下,翻看了下自己的随笔,最后一篇原创文章发布时间是2015年的4月,今天是2017年 ...

  9. SQL Server Alwayson可用性副本会话期间的可能故障

    200 ? "200px" : this.width)!important;} --> 介绍 物理故障.操作系统故障或 SQL Server 故障都可能导致两个可用性副本之间 ...

  10. Mac 上所有的命令行相关问题的总结

    1. java 系列命令 jdk,jar,war等等文件的执行方式 2. brew 系列命令 安装各种其他程序的命令例如:jenkins,MySQL,openssl brew list   列出所有的 ...