pattern属性(表单验证input)

文章介绍了HTML5中pattern属性的使用,它允许开发者通过正则表达式对表单输入进行复杂的数据格式验证。文中列举了一些常见的正则表达式示例,如邮箱、电话号码、身份证号和密码等,以帮助前端开发者实现更精确的用户输入验证。通过pattern属性,可以确保如手机号码、邮箱等字段的格式正确性,提高用户体验并减轻服务器端的验证压力。
摘要由CSDN通过智能技术生成

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="">
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值