html5客戶端端表單驗證
作者:佚名 時間:2014-07-05 分享到:
新輸入類型確實有所益處,但或許html5為開發人員帶來的最大好處是本地客戶端錯誤檢查,在提交表彰之前檢查其內容對于安全性和可用性是極說罷重要的,而且到目前為止,雖然數以百計的javascript庫都是為這個主題編寫的,但始終沒有一個可以實現上述功能的簡單方法.
現在通過使用本地表單驗證,許多瀏覽器會自動提醒用戶其在輸入中輸入的值與輸入類型不匹配,例如,在firefox瀏覽器中,如果只在email輸入中鏈接數字或在url輸入中忽略url開頭的http://協議,那么圍繞輸入欄的鮮紅線框將會提醒用戶其輸入值錯誤.
如果用戶嘗試提交表單,則會在屏幕上收到一個出錯信息,如果出現錯誤信息,則證明用戶的瀏覽器已經實現了客戶端驗證,每種已經實現這個功能的瀏覽器都有其自己的樣式.
如果用戶刪除輸入框內的內容,然后再次單擊"提交",則不會出現錯誤提示,因為這一輸入欄在默認情況下是可選的,所以不為其提供值是有效的,但格式不正確的值是無效和,為了使這個輸入欄不可選 ,開發人員可以添加布爾型的屬性required:
<input type="email" required>
這個屬性強制瀏覽器檢查輸入欄的值,空值或格式不正確的值是無效的,且瀏覽器返回一個錯誤,只有格式正確的值才允許用戶提交表單.