[HTML]表單驗證與提示

本文收錄於你其實不用javascript系列,範例原始碼皆收錄於CssTrick

表單資料驗證相當重要,因為使用者輸入的資料皆有風險,不可全盤接受,不然很容易就有XSSSQL Injection等風險,所以後端的消毒絕對是不可少的,那前端的部分呢?為了使用者體驗,還是得做,但如果只是格式上的確認,瀏覽器就可以幫你完成大部分的工作了

首先,表單一定會有必填欄位,這部分只要在屬性加上requried就可以了,線上展示,送出時若未填寫,瀏覽器會自動提示

<form>
  Username: <input name="username" type="text" required /><br />
  Email: <input name="email" type="email" required /><br />
  <input type="submit" value="Submit" />
</form>

針對不同輸入類型,可以利用type屬性來限制,像是日期、數字、顏色、Email等,進一步可以限制長度範圍,更進階的話,可以使用正規表達式指定內容模式,瀏覽器都會幫你檢查確認是否符合,線上展示,其中Username限制長度3-5之間,Tel限制電話的格式,此處以台灣手機為例

<form>
  Username: <input name="username" type="text" required minlength="3" maxlength="5" placeholder="3-5 characters" /><br />
  Email: <input type="email" required /><br />
  Date: <input type="date" placeholder="yyyy-mm-dd" required /><br />
  Number: <input type="number" required /><br />
  Color: <input type="color" required /><br />
  Time: <input type="time" placeholder="HH:mm" /><br />
  Tel: <input id="telNo" name="telNo" type="tel" required pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"><br />
  <input type="submit" value="Submit" />
</form>

其中<input type="date">或者time在Mac Safari瀏覽器不會有日期或時間選擇器,可以參考這篇文章,由於Safari沒有實作,建議加上placeholder屬性提示格式,如果真的沒辦法,就只能用javascript實現了,筆者表示無奈 ˊ_>ˋ

另外很重要的一點,就是必須要有submit按鈕,才能觸發瀏覽器的檢查,不管是<input type="submit"/>或是<button>Summit</button>都可以,如果送出按鈕是圖片的話,也可以用<input type="image">,以前沒注意到,用自訂的<input type="button">,試半天都出不來,特別提醒一下避免中招

針對符合或不符合格式的欄位,預設瀏覽器再送出表單時,跳到不符合的欄位提示,若想統一風格,可以自訂CSS樣式,使用input:validinput:invalid,甚至更進一步即時顯示是否符合,不要懷疑,僅需要CSS即可達成效果,線上展示

input + .check_result:before{
  width: 1em;
  height: 1em;
  margin-left: 4px;
  padding: 2px;
  color: black;
  text-align: center;
  /*Trick for IE11 won't update immediately issue.*/
  animation: repaint 1000s infinite linear;
}
input:invalid + .check_result:before{	
  content: "\2716";
  background-color: pink;
}
input:valid + .check_result:before{	
  content: "\2714";
  background-color: lightgreen;
}
input:focus:invalid {
  background-color: pink;
}
@keyframes repaint {
  from { opacity: 1; }
  to { opacity: 0.99999; }
}
<form>
  Email: <input type="email" required /><span class="check_result"></span><br />
  Tel: <input id="telNo" name="telNo" type="tel" required pattern="0[0-9]{3}-[0-9]{3}-[0-9]{3}" placeholder="0912-345-678"><span class="check_result"></span><br />
  <input type="submit" value="Submit" />
</form>

效果如下圖,未輸入或輸入值不符合格式時,自訂的樣式右邊顯示粉紅色叉叉,格式正確後,即更新為綠色的勾勾,符號部分下方參考有提供列表。這邊筆者在測試不同瀏覽器效果時,遇到了一個坑,IE11無法即時更新:before虛擬元素,後來查詢相關資料後,有一個蠻特殊的解法,就是讓:before執行一個無窮動畫,強迫該元素重新選染即可,因此上面的CSS才有一個repaint動畫,不需要相容IE的話,可以拿掉

參考來源

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s

在 WordPress.com 建立網站或網誌

向上 ↑

%d 位部落客按了讚: