文、菜鳥編
表單驗證,用在確認欄位是否有填寫外,還可確定資料是否有依照規範的格式填寫。如果是早期就接觸網頁設計的人,應該都有過對表單驗證相當頭疼的經驗,假使需求又是特別奇怪的,相信一定讓人爆炸。早期大多是透過javascript來完成,不過再HTML5提供了input的新屬性後,就可以很簡單的直接使用。
使用方式就是在input標籤中,加上「required」這個新屬性,如未填寫資料時,就會在送出時跳出提示框。
可以透過下面來測試看看
以下為E-mai驗證,也會確認是否有出現未符合E-mail格式的填寫
可以透過下面來測試看看
當然除了設定必填之外,有時候我們還是需要針對欄位內容設定特殊的設定,例如生日。這時就須將type改使用「pattern」。
以生日來說,如果你希望填寫方式是 西元年-月-日,則是使用「pattern="[0-9]{4}[-][0-9]{2}[-][0-9]{2}"」,以限定只能填入數字,並以「-」做區隔。
可以透過下面來測試看看
當然,你也可以套用在密碼設定上,例如密碼設定的規則為6-16字元,由英文或數字所組成,則編碼如下:
可以透過下面來測試看看
也可使用「maxlength」來限制輸入的最大長度 ,如超過16位元,就不會再顯示。
可以透過下面來測試看看
這邊也提醒大家,畢竟不是每個瀏覽器都支援,所以建議使用還是依照自己需求評估一下喔。
官方網站:http://www.lccnet.com.tw
FB粉絲團:https://www.facebook.com/lccnetzone
菜鳥救星:https://www.facebook.com/greensn0w
延伸閱讀
留言列表