本文收錄於你其實不用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的話,可以拿掉


參考來源
發表迴響