html5pattern用法,html中pattern的用法
最近在做手机页面的时候，遇到了数字输入的键盘问题。之前的做法是一刀切用type=tel ，但我总觉得九宫格的电话号码键盘上的英文字母太碍事了。所以想尝试其他的实现方案，但是最后的结论令人沮丧。不过，我也借此机会了解了更多关于属性模式的知识。type="tel" 和 type="number" 的区别
在这里，我们先解释一下初始问题。事实上，电话和号码都不是完美的：
type=tel
好处是iOS和Android的键盘性能差不多。
缺点是那些字母是多余的。虽然我没有强迫症，但还是觉得奇怪。
type=number
优点：是Android下实现的真正的数字键盘。
缺点：不是iOS下的九宫格键盘，输入不方便。
缺点：旧版Android(包括微信用的X5内核)在输入框后面会有一个超级鸡肋的小尾巴。好在安卓4.4.4之后就去掉了。
然而，对于第二个缺点，我们可以使用webkit私有伪元素来修复它：
XML/HTML代码将内容复制到剪贴板输入[type=number]:-WebKit-inner-spin-button，输入[type=number]:-WebKit-outer-spin-button {-WebKit-appearance:none；外观：无；边距：0；}pattern属性
模式用于验证表单的输入内容。通常是HTML5的类型属性，比如email，tel，number，data class，url等。已经有了自己简单的数据格式验证功能。模式的加入，使得前端部分的验证更加简单高效。
显然，模式的属性值应该使用正则表达式。
例子
简单的数字验证
有两种数字验证：
XML/HTML代码将内容复制到剪贴板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} $
签证：^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])
身份证：([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的浏览器支持很糟糕：
但如果你只是像文章开头说的那样换个数字键盘，iOS和Android都没问题。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。