html 简单的消息提示验证信息

<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}$