文、菜鳥編

表單驗證,用在確認欄位是否有填寫外,還可確定資料是否有依照規範的格式填寫。如果是早期就接觸網頁設計的人,應該都有過對表單驗證相當頭疼的經驗,假使需求又是特別奇怪的,相信一定讓人爆炸。早期大多是透過javascript來完成,不過再HTML5提供了input的新屬性後,就可以很簡單的直接使用。

 

使用方式就是在input標籤中,加上「required」這個新屬性,如未填寫資料時,就會在送出時跳出提示框。

可以透過下面來測試看看

姓名:  

 

以下為E-mai驗證,也會確認是否有出現未符合E-mail格式的填寫

可以透過下面來測試看看

E-amil:  

 

當然除了設定必填之外,有時候我們還是需要針對欄位內容設定特殊的設定,例如生日。這時就須將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

 

延伸閱讀

聯成電腦分享:全方位養成  設計、行銷、企劃一次學會

聯成電腦菜鳥救星:快速找出瀏覽過的網頁內容

聯成電腦菜鳥救星:讓Outlook與Google行事曆同步的2個工具

聯成電腦菜鳥救星:使用影子系統,讓你擺脫修電腦的困擾

聯成電腦資訊分享:不會寫語法,也能輕鬆做網站!

文章標籤
創作者介紹

聯成電腦--在成長的路上彼此相伴

lccnetvip 發表在 痞客邦 PIXNET 留言(0) 人氣()