一些有用的HTML5 pattern

标签: HTML5 表单 正则 | 发表时间:2015-06-18 21:42 | 作者:神飞
出处:http://www.qianduan.net/

最近在做手机页面时,遇到数字输入的键盘的问题,之前的做法只是一刀切的使用 type="tel",不过一直觉得九宫格的电话号码键盘上的英文字母太碍事了。于是想要尝试其它的实现方案,最终的结论却令人沮丧。不过也趁机详细了解了下 pattern这个属性。

type="tel" 和 type="number" 的区别

这里还是先那么先交代一下最初遇到的问题。其实无论是 tel还是 number都不是完美的:

type="tel"

  • 优点是iOS和Android的键盘表现都差不多
  • 缺点是那些字母好多余,虽然我没有强迫症但还是感觉怪怪的啊。

type="number"

  • 优点是Android下实现的一个真正的数字键盘
  • 缺点一:iOS下不是九宫格键盘,输入不方便
  • 缺点二:旧版Android(包括微信所用的X5内核)在输入框后面会有超级 鸡肋的小尾巴,好在Android 4.4.4以后给去掉了。

不过对于缺点二,我们可以用webkit私有的伪元素给fix掉:

  input[type=number]::-webkit-inner-spin-button,  
    input[type=number]::-webkit-outer-spin-button { 
        -webkit-appearance: none; 
        appearance: none; 
        margin: 0; 
    }

pattern属性

pattern用于验证表单输入的内容,通常HTML5的 type属性,比如 emailtelnumberdata类、 url等,已经自带了简单的数据格式验证功能了,加上pattern后,前端部分的验证更加简单高效了。

显而易见, pattern的属性值要用正则表达式。

实例

简单的数字验证

数字的验证有两个:

  <input type="number" pattern="\d">  
<input type="number" pattern="[0-9]*">  


对表单验证来说,这两个正则的作用是一样的,表现的话差异就很大:

  • iOS中, 只有 [0-9]\*才可以调起九宫格数字键盘\d 无效
  • Android 4.4以下(包括X5内核),两者都调起数字键盘;
  • Android 4.4.4以上,只认 type 属性,也就是说,如果上面的代码将 type="number" 改为 type="text" ,将调起全键盘而不会是九宫格数字键盘。

常用的正则表达式

pattern的用法都一样,这里不再啰嗦各种详细写法了,只是列出来一些常用的正则就好了:

  • 信用卡 [0-9]{13,16}
  • 银联卡 ^62[0-5]\d{13,16}$
  • Visa: ^4[0-9]{12}(?:[0-9]{3})?$
  • 万事达: ^5[1-5][0-9]{14}$
  • QQ号码: [1-9][0-9]{4,14}
  • 手机号码: ^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$
  • 身份证: ^([0-9]){7,18}(x|X)?$
  • 密码: ^[a-zA-Z]\w{5,17}$ 字母开头,长度在6~18之间,只能包含字母、数字和下划线
  • 强密码: ^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$ 包含大小写字母和数字的组合,不能使用特殊字符,长度在8-10之间
  • 7个汉字或14个字符: ^[\u4e00-\u9fa5]{1,7}$|^[\dA-Za-z_]{1,14}$

浏览器支持

很不幸,pattern的浏览器支持很惨: via Can I Use
但是如果只是如文章开头提到的改 数字键盘的话,iOS和Android都是没有问题的。

相关 [html5 pattern] 推荐:

一些有用的HTML5 pattern

- - 前端观察
最近在做手机页面时,遇到数字输入的键盘的问题,之前的做法只是一刀切的使用 type="tel",不过一直觉得九宫格的电话号码键盘上的英文字母太碍事了. 于是想要尝试其它的实现方案,最终的结论却令人沮丧. 不过也趁机详细了解了下 pattern这个属性. type="tel" 和 type="number" 的区别.

The Open Session In View Anti-Pattern - Vlad Mihalcea

- -
An anti-pattern (or antipattern) is a common response to a recurring problem that is usually ineffective and risks being highly counterproductive.. When using JPA and Hibernate, the Fetching policy can have one of the biggest impacts on application performance, and, as explained in my.

Big Pattern:比数据更大的是模式

- - 36氪
前些天我们编译一篇 《大数据时代》的文章,宣告了大数据时代的到来. 对于企业技术算法的大玩家来说,还要找出数据自身以外更大的东西,即大模式. 在线生活的爆炸以及廉价计算机硬件使得存储海量非结构化信息(像电子邮件或互联网点击流)成为了可能,然后再去搜索存储的信息,从中找到某些可以利用的趋势. 真正的难点在于高效地去做这件事情.

HTML5 logo 发布

- Greyby - 酷壳 - CoolShell.cn
2011年1月19日,W3C发布了HTML5的log,打开W3C的页面,下在的图片印入眼前. 我的第一感觉,就像是看到了小时候看的八一电影制片产的电影. 这分明是号召全世界的无产Web程序员们团结起来,不畏艰难,不怕牺牲,一定要把HTML5的革命事业进行到底. 所以,请各位Web程序员不但在你们的HTML5的网页上加上下面的徽章(关于各个徽章的含义,请参看这里).

html5 canvas入门

- - Marshal's Blog
可以把canvas看做div,不过,它的长和宽不能通过css来定义,要使用标签属性:. 或者javascript对象属性设置:. 使用canvas,只有一种操作方式,使用javascript. 获得canvas对象的上下文对象,该对象是操作canvas的主要对象:. 使用canvas画最简单的线, 点击运行示例,结果看起来是这样:.

HTML5新特性

- - CSDN博客推荐文章
 通过fillStyle和strokeStyle 属性可以轻松的设置矩形的填充和线条. 颜色值使用方法和CSS 一样:十六进制数、rgb()、rgba() 和 hsla. 通过 fillRect可以绘制带填充的矩形. 使用 strokeRect 可以绘制只有边框没有填充的矩形. 如果想清除部分 canvas可以使用clearRect.

【转载】HTML5 Messaging

- - HTML5研究小组
HTML5 的Message API能够让HTML5页面之间传递消息,甚至这些页面可以不在同一样域名下. 为了让消息能从一个页面发送到另一个页面,主动发送消息的页面必须拥有另一个页面的窗口引用. 然后发送 页面针对接受页调用 postMessage() 方法. postMessage() 方法中 origin 参数的值必须与页面所在的iframe的域名相匹配.

Adobe、标准和HTML5 -HTML5 and CSS3 开发

- - HTML5研究小组
“[提供商之间的]最激烈的竞争将与 标准密切相关. 大部分聪明人的眼睛将紧盯着技术标准. 但在计算机行业,新标准既可能是无限财富的源泉,也可能导致企业帝国的毁灭. 尽管存在着如此多的风险,标准仍然点燃了无限激情”. —The Economist, 1993年2月23日. 在编写这段有关标准化的话时,计算领域的主要争议是Unix是否是一个可行的操作系统(以及是否为IBM、DEC和HP的更多专用操作系统带来了挑战),以及哪个视窗平台(SUN/AT&T还是IBM/DEC/HP)将成为标准.

HTML5漫谈(4)–HTML5应用平台:PhoneGAP

- - HTML5研究小组
(  程宝平 chengbp @gmail.com). http://phonegap.com)按官方说法,是HTML5移动应用平台,它包括两部分:. 1)       应用开发框架:采用Web/HTML5技术编写应用,支持设备能力(如GPS、重力感应等)调用;支持能力插件灵活扩展. 图1 PhoneGAP支持设备能力API列表.

HTML5新特性之CSS+HTML5实例

- - CSDN博客Web前端推荐文章
1、新的DOCTYPE和字符集. HTML5的一项准则就是化繁为简,Web页面的DOCTYPE被极大的简化. HTML5引入了很多新的标签,根据内容和类型的不同,被分为7大类. 语义化标签可以简化HTML页面设计,并且将来搜索引擎在抓取和索引网页的时候,也会利用这些元素的优势. HTML5的宗旨之一就是存在即合理.