HTML5中有哪些常用的模式(pattern)可以帮助优化表单验证？

HTML5模式（pattern）用于表单验证，包括电子邮件、电话号码、日期等格式。email 用于匹配邮箱地址，tel 用于匹配电话号码，date 用于匹配日期格式。这些模式有助于提高表单数据的准确性和有效性。

1、数字验证

简单的数字验证

<input type="number" pattern="\d">

<input type="number" pattern="[09]*">

2、常用正则表达式

信用卡：[09]{13,16}

银联卡：^62[05]\d{13,16}$

Visa：^4[09]{12}(?:[09]{3})?$

万事达：^5[15][09]{14}$

QQ号码：[19][09]{4,14}

手机号码：^(13[09]|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}$

身份证：^([09]){7,18}(x|X)?$

密码：^[azAZ]\w{5,17}$

强密码：^(?=.*\d)(?=.*[az])(?=.*[AZ]).{8,10}$

7个汉字或14个字符：^[\u4e00\u9fa5]{1,7}$|^[\dAZaz_]{1,14}$

FAQs

**问题1：为什么在iOS中，只有[09]才能调起九宫格数字键盘？

答：在iOS系统中，当使用type="number"和pattern属性时，只有[09]这个正则表达式能够正确调用出九宫格数字键盘，其他正则表达式如\d可能无法达到预期效果，这是由于iOS系统对正则表达式的解析和处理方式不同所致。

问题2：如何兼容旧版Android（包括微信所用的X5内核）在输入框后面出现的超级鸡肋的小尾巴？

答：在旧版Android（包括微信所用的X5内核）中，使用type="number"会在输入框后面出现一个小尾巴，为了去掉这个小尾巴，可以使用webkit私有的伪元素进行样式覆盖：

input[type=number]::webkitinnerspinbutton,input[type=number]::webkitouterspinbutton {    webkitappearance: none;    appearance: none;    margin: 0;}

这段CSS代码会隐藏掉小尾巴，从而提供更好的用户体验。