H5 input表單校驗提示語的自定義

1.表單校驗

在H5出來以後,咱們在使用Input的時候能夠在Input表單裏面直接就能夠進行一些簡單的校驗了,好比maxlength.required....之類的,爲咱們的編碼帶來了不少的方便.廢話很少說,直接看代碼:

<input id='user_name' type='text' name='user_name'  required/>
//這個Input輸入框如今就具有了簡單的校驗功能,經過required就能夠限定這個input輸入框必須有輸入才能夠提交

 很是的方便,可是使用這個屬性的時候我遇到了一個問題.當用戶沒有輸入的時候會提示:請輸入此字段.

2.解決方法

<input id='qq' type='text' name='qq' required oninvalid="setCustomValidity('請輸入QQ號碼！');" oninput="setCustomValidity('');"/>
//經過添加2個語句就能夠在校驗的時候自定義錯誤提示.oninvalid="setCustomValidity('在這裏輸入自定義的表單驗證提示!');"

見下圖：