本文收錄於你其實不用javascript系列，範例原始碼皆收錄於CssTrick
表單資料驗證相當重要，因為使用者輸入的資料皆有風險，不可全盤接受，不然很容易就有XSS或SQL 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:valid和input: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的話，可以拿掉
參考來源
發表迴響