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


參考來源
發表迴響