iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 6
0
Modern Web

菜鳥前端奮鬥史(欸?系列 第 6

Day06 「防呆機制好麻煩」 ─ HTML5 內建的表單檢查!

雖然知道it邦是使用 Markdown 格式做撰寫,要避免使用 HTML 格式,但沒想到居然連標題都會受到影響..
/images/emoticon/emoticon17.gif
所以把昨天的標題緊急修正了.. (都過了快一天好像也不怎麼緊急)


一般來說在網頁常見的表單推送方面,都會要求做一些防呆的機制
比如:要求填寫正確的 e-mail 格式、不可留白 之類的
但是對於不會撰寫 JavaScript 的人來說,難免有些困難

對此, HTML5 有了直接在 HTML 上做類似效果的方法
也就是 inputrequired 屬性!

  <div class="container">
    <form class="add-item">
      <input type="text"placeholder="請輸入文字..." required />
      <br/>
      <input type="email" placeholder="請輸入電子郵件..." required />
      <button type="submit" class="btn">送出</button>
    </form>
  </div>

在這段 code 當中,required 可自動幫我們偵測 input 是否為空值
https://ithelp.ithome.com.tw/upload/images/20171225/20107640ZUiOjBzQXD.png
甚至是檢查 type="email" 的部分是否為電子郵件格式
https://ithelp.ithome.com.tw/upload/images/20171225/20107640m181BQym2a.png

當然這麼方便的東西也是有缺點的
由於 required 是 HTML5 才被設計出的語法,在某些瀏覽器版本可能會有不兼容/失去作用的情況發生
所以防呆最好的做法,還是自己手刻一份 JavaScript 比較保險一些唷!

一樣放上本次的 demo 供大家把玩
required codepen demo


12/27 補充:
使用 required 時需要注意!
需要 required 檢查的 inputbutton(or submit) 必須跟 form 表單綁在一起才會正常作用唷!

比如說下列這種情況

 <div class="container">
    <form class="add-item">
      <input type="text"placeholder="請輸入文字..." required />
      <br/>
      <input type="email" placeholder="請輸入電子郵件..." required />
    </form>
    <button type="submit" class="btn">送出</button>
  </div>

由於系統並不知道這顆 button 點擊後具體來說是要傳送哪邊的資料出去,所以 required 自然也沒辦法做到原先我們想要的效果


>>隊友任意門<<

我是小菜鳥阿陰,我們下次見!


上一篇
Day05 「弟兄們,為了SEO!」 ─ 將 h1 圖片取代文字!
下一篇
Day07 「今天只是想偷個懶..」 ─ 來介紹一下那些幫助開發的 Chrome 插件吧!
系列文
菜鳥前端奮鬥史(欸?30

尚未有邦友留言

立即登入留言