HTML5 setCustomValidity() 自定義驗證資訊
表單是網頁的核心之一,前端表單驗證自然是一項重要的工作。
此工作是網站優化的一部分,由於不通過伺服器,所以能以較快的響應速度給使用者提示。
HTML5之前,前端表單驗證主要利用原生JavaScript或者相關外掛,相對較為繁瑣。
隨著版本演進,HTML5提供了更為便捷的前端表單驗證方式,像是快餐,可以完全不用JavaScript。
快餐雖然很便捷,但是味道未必好,就如同現在不努力,確實比較逍遙,未來可能會比較辛苦。
預設的驗證資訊提示語言都是固定的,非常的不友好,看如下程式碼例項:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> body{margin:20px;} </style> <script> </script> </head> <body> <form action="#" method="post"> <input type="text" pattern="^\d{3,8}$" required> <input type="submit" id="bt" value="提交表單"/> </form> </body> </html>
上述程式碼通過pattern屬性規定文字框輸入的內容必須是3到8位數字。
當輸入的內容不符合規則的時候,提交表單彈出的提示資訊是完全一樣的。
彈出資訊截圖如下:
通常應該彈出期待輸入資訊的格式,而不是這種基本上毫無價值的資訊。
HTML5提供了相關的解決方案,使用setCustomValidity方法自定義即可。
此方法屬於對應的表單元素,賦予的引數值即是我們所期待的驗證失敗時的提示語。
上述程式碼修改如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> body{margin:20px;} </style> <script> window.onload=()=>{ let num=document.getElementById("num"); num.setCustomValidity("請輸入3-8位數字"); } </script> </head> <body> <form action="#" method="post"> <input type="text" id="num" pattern="^\d{3,8}$" required> <input type="submit" id="bt" value="提交表單"/> </form> </body> </html>
上述程式碼通過setCustomValidity方法自定義了演示失敗提示語。
當文字框沒有填寫任何內容的時候,點選提交按鈕的提示語截圖如下:
當文字框輸入內容格式不匹配時候,點選提交按鈕的提示語截圖如下:
兩個提示語完全相同,通常情況下,如果沒有填寫內容那麼給出的提示應該是"不能為空"之類的。
如果填寫格式不對,那麼給出的提示語才是"請輸入3-8位數字",也就是說簡單的通過setCustomValidity方法設定提示語,雖然在一定程度上滿足了需求,但是會將各種場景的提示語都統一為一種,不人性化。如果HTML5驗證功能的能力僅此而已,那就實在太雞肋的,沒有讓我們失望,可以根據不同的錯誤型別來定義提示語。
上述程式碼修改如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> body{margin:20px;} </style> <script> window.onload=()=>{ let num=document.getElementById("num"); let obt=document.getElementById("bt"); obt.onclick=()=>{ let v = num.validity; if(true === v.valueMessing){ num.setCustomValidity("欄位不能為空"); }else{ if(true === v.patternMismatch){ num.setCustomValidity("請輸入3-8位數字"); }else{ num.setCustomValidity(""); } } } } </script> </head> <body> <form action="#" method="post"> <input type="text" id="num" pattern="^\d{3,8}$" required> <input type="submit" id="bt" value="提交表單"/> </form> </body> </html>
上面程式碼完美實現了根據不同的表單錯誤,給出相應提示語的效果。
表單元素物件有一個validity屬性,它可以返回一個物件,此物件包含各種型別驗證失敗的判斷功能。
比如表單必需性驗證失敗,那麼此物件的valueMessing屬性返回值為true,輸入的格式不匹配,那麼物件的patternMismatch屬性返回值為true,根據這個特點,可以實現驗證不同錯誤型別,給出不同的錯誤提示的功能。關於validity屬性的更多內容可以參閱validity 屬性一章節。
相關文章
- HTML5 setCustomValidity()自定義驗證資訊HTML
- HTML5 自定義驗證資訊顯示方式HTML
- HTML5 pattern自定義驗證規則HTML
- mongoose使用validate驗證, 獲取自定義驗證資訊Go
- jQuery Validate自定義驗證錯誤資訊jQuery
- Laravel 自定義表單驗證-自定義驗證規則Laravel
- 自定義react資料驗證元件React元件
- Jwtauth 自定義認證頭資訊JWT
- SpringBoot-表單驗證-統一異常處理-自定義驗證資訊源Spring Boot
- Layui 自定義表單驗證UI
- Android自定義View---驗證碼AndroidView
- thinkphp驗證器獲取$data資料,自定義驗證,多條件唯一性驗證unique驗證PHP
- gRPC(七)進階:自定義身份驗證RPC
- gin自定義驗證器&轉化中文
- 表單驗證自定義格式輸出
- jQuery Validate新增自定義驗證規則jQuery
- Laravel 自定義表單請求驗證忽略某些欄位驗證Laravel
- Laravel 自定義驗證規則的問題Laravel
- Android自定義方形驗證碼輸入框Android
- 如何使用JSR303驗證及自定義訊息統一處理JS
- 驗證裡,PHP 檔案中指定自定義值PHP
- 6. 自定義容器型別元素驗證,類級別驗證(多欄位聯合驗證)型別
- UEditor 自定義圖片視訊尺寸校驗
- 【asp.net core】自定義模型繫結及其驗證ASP.NET模型
- ASP.NET Core - 實現自定義WebApi模型驗證ASP.NETWebAPI模型
- Laravel 模型自定義驗證,同於其它框架 (Yii、tp)Laravel模型框架
- Android View篇之自定義驗證碼輸入框AndroidView
- 自定義Spring Security的身份驗證失敗處理Spring
- [Laravel] 自定義配置你的密碼驗證規則Laravel密碼
- 【Laravel】 自定義配置你的密碼驗證規則Laravel密碼
- 自定義 ocelot 中介軟體輸出自定義錯誤資訊
- [Laravel 8 使用者認證] Jetstream 之 如何自定義登入驗證Laravel
- PbootCMS如何取消後臺、留言、自定義表單驗證碼boot
- pbootcms提交留言、提交自定義表單時取消驗證碼boot
- Java 自定義註解在登入驗證的應用Java
- 自定義類載入器驗證類載入機制
- 自定義一個簡單的資料模型驗證器類,可用於各類驗證場景,待後續完善模型
- Laravel, vee-validate, 阿波羅 自定義表單時時驗證Laravel