html5表單自帶的表單驗證規則身份證，手機號

html5表單自帶的表單驗證規則身份證，手機號如何設置，今天在開發家政小二平臺中遇到這個問題，現教大家如何使用。

html5表單驗證
之前一直不知道怎么自定義提示信息，今天看到了資料就記錄一下，也把經常要用到的html5表單驗證記錄一下。

• setCustomValidity() html5內置的js方法，自定義提示信息
• oninvalid 提交的input元素的值為無效值時，觸發oninvalid事件、

<form>
<!-- 第一種方式 定義了一個validatelt函數-->
<!-- <p>姓名：<label><input type="text" name="" required="required" pattern="[\u4e00-
\u9fa5]{2,4}" placeholder="請輸入姓名" oninvalid="validatelt(this,'真實姓名必須是中文，且長度不小于2
，不大于4')"></label></p>

<p>手機號碼：<label><input type="tel" name="" required="required" maxlength="11"
pattern="^(0|86|17951)?1[0-9]{10}" placeholder="請輸入手機號" oninvalid="validatelt(this,'請輸入11位
手機號碼')" ></label></p> -->

pattern="(\d{11})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$" required="required" onblur="setCustomValidity('請輸入正確的手機號!')" input 驗證判斷手機號并修改默認提示信息

<!-- 第二種調用html5自帶的驗證 -->

<p>姓名：<label><input type="text" name="" required="required" pattern="[\u4e00-\u9fa5]
{2,4}" placeholder="請輸入姓名" oninvalid="setCustomValidity('真實姓名必須是中文，且長度不小于2，不大
于4')" oninput="setCustomValidity('')"></label></p>

<p>密碼：<label><input type="password" name="" required="required" pattern="^[a-zA-Z0-
9]\w{5,19}$" placeholder="請輸入密碼" oninvalid="setCustomValidity('6~20字母數字或下劃線')"
oninput="setCustomValidity('')"></label></p>

<p>身份證號：<label><input type="text" name="" required="required"pattern="^[1-9]\d{5}[1
-9]\d{3}((0[1-9])|(1[0-2]))((0[1-9])|([1-2]\d)|(3[0-1]))((\d{4})|(\d{3}[Xx]))$" placeholder="請輸入
身份證號" oninvalid="setCustomValidity('請輸入正確的身份證號碼')" maxlength="18"
oninput="setCustomValidity('')"></label></p>

<p>手機號碼：<label><input type="tel" name="" required="required" maxlength="11"
pattern="^(0|86|17951)?1[0-9]{10}" placeholder="請輸入手機號" oninvalid="setCustomValidity('請輸入11
位手機號碼')" oninput="setCustomValidity('')"></label></p>

<p>郵箱：<label><input type="email" name="" required="required" placeholder="請輸入郵箱"
></label></p>

<p>時間：<label><input type="date" name="" required="required" pattern="" placeholder="
請輸入時間" ></label></p>

<p>網址：<label><input type="url" name="" required="required" pattern="/^(https?:\/\/)?
([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/" placeholder="請輸入網址" ></label></p>
身份證：&nbsp;&nbsp; 身份證：&nbsp;&nbsp; <input type="text" name="sfz" required value=""
pattern="^[1-9]\d{5}[1-9]\d{3}((0[1-9])|(1[0-2]))((0[1-9])|([1-2]\d)|(3[0-1]))((\d{4})|(\d{3}[Xx]))$"
style="width:250px; height:40px; margin-top:10px;border:1px solid orangered;background-
color:#FFFFFF" /> </tr>
<input type="submit" name="提交">
</form>
</div>

</footer>
</body>
<script>
// 第一種方式 對懸浮窗的設置
function validatelt(inputelement,err){
if(inputelement.validity.patternMismatch){
inputelement.setCustomValidity(err);

}else{
inputelement.setCustomValidity("");
return true;
}
}
</script>

常用的正則表達式

pattern=" [\u4e00-\u9fa5]" //只匹配中文
pattern="/^\d{6,}$/" // 密碼必須是6位數字以上
pattern="/^[a-zA-Z_]\w{5,}$/" // 6位字母組成不能數字開頭