一些常用的HTML5模式(pattern) 总结


Posted in HTML / CSS onJuly 14, 2015

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

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

    优点是iOS和Android的键盘表现都差不多
    缺点是那些字母好多余,虽然我没有强迫症但还是感觉怪怪的啊。
一些常用的HTML5模式(pattern) 总结

type="number"

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

一些常用的HTML5模式(pattern) 总结

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

XML/HTML Code复制内容到剪贴板
  1. input[type=number]::-webkit-inner-spin-button,     
  2.     input[type=number]::-webkit-outer-spin-button {    
  3.         -webkit-appearance: none;    
  4.         appearance: none;    
  5.         margin: 0;    
  6.     }  

pattern属性

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

显而易见,pattern的属性值要用正则表达式。
实例
简单的数字验证

数字的验证有两个:

XML/HTML Code复制内容到剪贴板
  1. <input type="number" pattern="\d">     
  2. <input type="number" pattern="[0-9]*">    

一些常用的HTML5模式(pattern) 总结

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

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

常用的正则表达式

pattern的用法都一样,这里不再??赂髦窒晗感捶?耍?皇橇谐隼匆恍┏S玫恼?蚓秃昧耍?/p>

    信用卡 [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的浏览器支持很惨:
一些常用的HTML5模式(pattern) 总结

但是如果只是如文章开头提到的改数字键盘的话,iOS和Android都是没有问题的。

HTML / CSS 相关文章推荐
使用简单的CSS3属性实现炫酷读者墙效果
Jan 08 HTML / CSS
CSS3实例分享--超炫checkbox复选框和radio单选框
Sep 01 HTML / CSS
CSS3绘制超炫的上下起伏波动进度加载动画
Apr 21 HTML / CSS
CSS3 清除浮动的方法示例
Jun 01 HTML / CSS
浅谈HTML5新增及移除的元素
Jun 27 HTML / CSS
canvas绘制表情包的示例代码
Jul 09 HTML / CSS
如何使用html5与css3完成google涂鸦动画
Dec 16 HTML / CSS
五个2015 年最佳HTML5 框架
Nov 11 HTML / CSS
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
Apr 26 HTML / CSS
HTML5响应式(自适应)网页设计的实现
Nov 17 HTML / CSS
详解html5 shiv.js和respond.min.js
Jan 24 HTML / CSS
VSCode 自定义html5模板的实现
Dec 05 HTML / CSS
针对HTML5的Web Worker使用攻略
Jul 12 #HTML / CSS
极简的HTML5模版
Jul 09 #HTML / CSS
深入探究HTML5的History API
Jul 09 #HTML / CSS
HTML5中Localstorage的使用教程
Jul 09 #HTML / CSS
HTML5到底会有什么发展?HTML5的前景展望
Jul 07 #HTML / CSS
HTML5新增的8类INPUT输入类型介绍
Jul 06 #HTML / CSS
用HTML5实现鼠标滚轮事件放大缩小图片的功能
Jun 25 #HTML / CSS
You might like
全国FM电台频率大全 - 29 青海省
2020/03/11 无线电
漂亮的仿flash菜单,来自蓝色经典
2006/06/26 Javascript
基于MooTools的很有创意的滚动条时钟动画
2010/11/14 Javascript
HTML DOM的nodeType值介绍
2011/03/31 Javascript
jQuery 1.7.2中getAll方法的疑惑分析
2012/05/23 Javascript
一行代码告别document.getElementById
2012/06/01 Javascript
使用jQuery仿苹果官网焦点图特效
2014/12/23 Javascript
Javascript中的arguments与重载介绍
2015/03/15 Javascript
JavaScript中字符串拼接的基本方法
2015/07/07 Javascript
基于jQuery实现在线选座之高铁版
2015/08/24 Javascript
JavaScript File API实现文件上传预览
2016/02/02 Javascript
jquery中取消和绑定hover事件的实现代码
2016/06/02 Javascript
ES2015 Symbol 一种绝不重复的值
2016/12/25 Javascript
简单实现bootstrap选项卡效果
2017/02/08 Javascript
基于javascript 显式转换与隐式转换(详解)
2017/12/15 Javascript
vue和webpack项目构建过程常用的npm命令详解
2018/06/15 Javascript
详解js中let与var声明变量的区别
2020/04/05 Javascript
关于NodeJS中的循环引用详解
2019/07/23 NodeJs
JS实现移动端点击按钮复制文本内容
2019/07/28 Javascript
jquery实现垂直手风琴菜单
2020/03/04 jQuery
JS 图片压缩原理与实现方法详解
2020/04/29 Javascript
[06:06]2018DOTA2亚洲邀请赛主赛事第四日战况回顾 全明星赛欢乐上演
2018/04/07 DOTA
Python实现的径向基(RBF)神经网络示例
2018/02/06 Python
python画图的函数用法以及技巧
2019/06/28 Python
Python下应用opencv 实现人脸检测功能
2019/10/24 Python
全球领先的在线cosplay服装商店:RoleCosplay
2020/01/18 全球购物
自荐信模版
2013/10/24 职场文书
劳动竞赛活动方案
2014/02/20 职场文书
大学应届毕业生求职信
2014/05/24 职场文书
材料专业大学毕业生自荐书
2014/07/02 职场文书
云南省召开党的群众路线教育实践活动总结会议新闻稿
2014/10/21 职场文书
党员个人整改方案及措施
2014/10/25 职场文书
2014年护士工作总结范文
2014/11/11 职场文书
先进教师事迹材料
2014/12/16 职场文书
结婚幸福感言
2015/08/01 职场文书
mysql对于模糊查询like的一些汇总
2021/05/09 MySQL