<form class="form-horizontal" role="form" method="POST" action="/">
<div class="form-row-group with-icons">
<div class="form-row no-padding">
<i class="fa fa-mobile-phone"></i>
<input type="text" name="phone" class="form-element" pattern="[0-9]{11}"
title="请输入11位有效手机号码"
required="required" placeholder="请输入手机号码">
</div>
<div class="form-row no-padding">
<i class="fa fa-lock"></i>
<input type="password" name="password" class="form-element"
title="请输入6位有效密码"
pattern="[0-9]{6}" required="required" placeholder="请输入密码">
</div>
</div>
<div class="form-divider"></div>
<div class="form-row">
<button type="submit" class="button circle block orange">点击登录
</button>
</div>
</form>
我们在html 的 input 标签中,添加两个属性值。
1、
pattern="[0-9]{6}"
2、
title="请输入6位有效密码"
这两个属性值会根据,属性值1 pattern 的条件,如果不满足条件1 ,那么会在页面提示 tital 信息。截图如下
一些常用的,匹配
常用的正则表达式
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}$
身份证:^([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}$