pattern用于验证表单输入的内容,通常HTML5的type属性,比如email、tel、number、data类、url等,已经自带了简单的数据格式验证功能了,加上pattern后,前端部分的验证更加简单高效了。
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}$ (更简单的 ^1[0-9]{10}$ )
-
身份证:^([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}$
举个例子:
只能包含11个数字的文本字段(亲测有效):
phone: [ {required: true,message: "手机号不能为空",trigger: "blur"}, {pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur"} ]
<input type="text" value="" placeholder="请填写您的电话 *" title="手机号格式不正确" pattern="^1[0-9]{10}$" required="">