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 ...
随机推荐
- myEclipse hibernate连接数据库配置方法
Access数据库:
- Java 8 Learn Notes
Main reference: [1] http://winterbe.com/posts/2014/03/16/java-8-tutorial/ [2] https://plus.google.co ...
- 分辨率、像素和PPI
屏幕尺寸是指屏幕对角线的长度,一般以英寸为单位,1英寸(inch)=2.54厘米(cm).传统意义上的照片尺寸也是这个概念.所以同样尺寸(指对角线)的屏幕,也可能长宽比率不同.像素(Pixel):是位 ...
- 写给Android App开发人员看的Android底层知识(4)
(八)App内部的页面跳转 在介绍完App的启动流程后,我们发现,其实就是启动一个App的首页. 接下来我们看App内部页面的跳转. 从ActivityA跳转到ActivityB,其实可以把Activ ...
- 1.Java 加解密技术系列之 BASE64
Java 加解密技术系列之 BASE64 序号 背景 正文 总结 序 这段时间,工作中 用到了 Java 的加解密技术,本着学习的态度,打算从这篇文章开始,详细的研究一番 Java 在加解密技术上有什 ...
- Lambda类库篇 —— Streams API, Collector和并行
本文是深入理解Java 8 Lambda系列的第二篇,主要介绍Java 8针对新增语言特性而新增的类库(例如Streams API.Collectors和并行). 本文是对 Brian Goetz 的 ...
- HeadFirst SQL 读书摘要
数据库都是用 圆柱形表示的. 数据库中包含表 表中包含行和列 行又叫记录record, 列又叫 字段field 创建数据库 create database mypipe_l; 选择数据库 use m ...
- 《实战java高并发程序设计》源码整理及读书笔记
日常啰嗦 不要被标题吓到,虽然书籍是<实战java高并发程序设计>,但是这篇文章不会讲高并发.线程安全.锁啊这些比较恼人的知识点,甚至都不会谈相关的技术,只是写一写本人的一点读书感受,顺便 ...
- Python可视化:Seaborn库热力图使用进阶
前言 在日常工作中,经常可以见到各种各种精美的热力图,热力图的应用非常广泛,下面一起来学习下Python的Seaborn库中热力图(heatmap)如何来进行使用. 本次运行的环境为: windows ...
- 【T-SQL】系列文章全文目录(2017-06-02更新)
本系列[T-SQL]主要是针对T-SQL的总结. T-SQL基础 [T-SQL基础]01.单表查询-几道sql查询题 [T-SQL基础]02.联接查询 [T-SQL基础]03.子查询 [T-SQL基础 ...