2021年4月25日

免外掛實現各種複雜 HTML5 表單驗證功能﹍實作範例(電話+生日+郵件+密碼確認)

免外掛實現各種複雜 HTML5 表單驗證功能﹍實作範例(電話+生日+郵件+密碼確認)

Wayne Fu 0 A+
html5-validator.jpg-免外掛實現各種複雜 HTML5 表單驗證功能﹍實作範例(電話+生日+郵件+密碼確認)前幾年介紹過一個不錯的表單驗證外掛「Validator」,最近為了想增進網頁效能,研究一下能否不靠外掛就實現這些複雜功能。 由於 HTML5 已經內建基本的表單驗證功能,效果、質感都滿有水準的,那麼剩下的就是一一想辦法解決實作上容易遇到的情境。 本篇會舉例各種常見的表單項目如何進行驗證,並提供實作範例。 (圖片出處: pxhere.com)

一、強制驗證參數 required

HTML5 表單要觸發驗證的機制有這兩個:
  • 表單項目的 html 加上 required="required" 參數
  • 表單 form 之中必須有送出按鈕 input type="submit"
只要符合以上兩項要點,瀏覽器會檢查表單項目(例如 input)、以及其類型(type),執行對應的驗證。 html5-validator-1.png-免外掛實現各種複雜 HTML5 表單驗證功能﹍實作範例(電話+生日+郵件+密碼確認) 如上圖,在設定為輸入 Email 的表格加上 required 參數,在送出表單之時便會對輸入內容進行檢驗,發現文字不符合 email 格式時,便會出現提示文字,而這樣的效果完全是 HTML5 內建的,不需要安裝任何外掛。 瞭解以上前提後,以下針對常用的表單項目進行說明。

二、文字 text(電話)

文字輸入是最常見的型態,若要限制輸入的文字格式:
  • 可使用正規表示式,加上參數 pattern="填入正規表示式參數"
  • 可限制文字位元數,加上參數 maxlength="填入數字"
以下為輸入手機號碼的範例,利用正規表示式就能限制輸入的內容為 "09xx-xxxxxx" 這樣的格式: <input type="text" required="required" maxlength="11" pattern="09\d{2}-\d{6}"/>

三、日期 date(生日)

HTML5 表單的日期(date)型態內建了日期選擇器,可不用另裝外掛就有不錯的效果。以輸入生日為例,利用一些參數限制輸入範圍,就可避免使用者惡搞,假扮成嬰兒或是古人,以下為範例: <input type="date" min="1900-01-01" max="2021-01-01" required="required"/> 以上的參數限定日期只能輸入 "1900-01-01" 到今年元旦為止,避免出現未來日期以及上古人類。

四、Email

HTML5 表單支援 email 型態,但內建的檢驗功能過於陽春,只能檢測是否輸入了 "@" 符號,無法遏止使用者輸入惡搞、不存在的郵件信箱。 想要得到較佳的檢驗效果,最好使用正規表示式參數,以下為範例程式碼: <input type="email" required="required" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$"/> 以上的參數可限定使用者至少必須輸入 "xxx@xxx.xxx" 這樣的英數字串形式。

五、密碼(包含英數字串)

輸入密碼也是常用的表單項目,但困難的是如何限定輸入字串,避免使用者設定過於簡單的密碼。以下範例程式碼使用的正規表示式,可以限定使用者設定的密碼,至少要使用 6 個位元,至少使用一個英文字元,至少使用一個數字<input type="password" pattern="^(?=.*[a-zA-Z])(?=.*[0-9]).{6,}$" required="required"/>

六、自訂錯誤訊息

HTML5 表單內建的錯誤訊息大部分情況算是夠用,但我們總是會想要客製自訂的訊息,而且有些情況如果無法提示正確的字串格式,使用者怎麼知道要如何輸入呢? 以「二、文字 text(電話)」為例,我們設定的手機號碼形式 "09xx-xxxxxx" 說不定使用者根本不知道要輸入 "-",那麼錯誤訊息顯示半天使用者依然只輸入 10 個號碼,這個表單可就永遠發送不出去了! HTML5 支援的自訂錯誤訊息為呼叫 setCustomValidity 函數,詳細說明可參考這篇「html5 自訂表單驗證的警示文字 - setCustomValidity」,這篇提到幾個自訂錯誤訊息非常重要的 bug,以及解決方法,請務必詳讀。 這裡只摘錄重點與結論:
  • 自訂錯誤訊息需利用事件 oninvalid(當驗證錯誤時) 來觸發
  • 但只要使用了 oninvalid 且發生錯誤時,使用者每輸入一個字元都會持續跳出錯誤訊息,造成體驗不佳
  • 因此設定 oninvalid 事件後,需同時設定 oninput 事件,抹除錯誤訊息
用文字敘述比較難理解,建議實際操作一次就可瞭解,也可參照原文的程式碼,或之後的實作範例程式碼。

七、驗證密碼

既然前面提供了輸入密碼的例子,那麼表單下一個欄位必定是「驗證密碼」,而這件事要如何做到呢?而且很重要的一點,驗證密碼必須搭配「自訂錯誤訊息」才能讓整個功能完整,以下是範例程式碼: <input id="inputPassword" type="password" pattern="^(?=.*[a-zA-Z])(?=.*[0-9]).{6,}$" required="required" oninput="setCustomValidity('');" oninvalid="setCustomValidity('請輸入正確的密碼格式:含英數至少六個字元');"/> <input id="ConfirmPassword" type="password" required="required" oninput="setCustomValidity('');" onchange="if(document.getElementById('inputPassword').value != document.getElementById('ConfirmPassword').value){setCustomValidity('密碼不吻合');}"/>
  • 第一個輸入框輸入原始密碼,格式錯誤時會提醒輸入 "含英數至少六個字元"
  • 第二個輸入框再次輸入密碼,輸入完會檢查兩個輸入框的字串是否一致,如果不一致便會出現提醒訊息 "密碼不吻合"

八、實作範例

以下統整前面的所有範例,利用 Bootstrap 修飾版面,製作一個常見的會員註冊表單: <!--引用 Bootstrap--> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <!--表單內容--> <form> <div class="form-group"> <input name="Name" type="text" class="form-control" placeholder="姓名" required="required" minlength="2"/> </div> <div class="form-group"> <input name="Email" class="form-control" type="email" placeholder="電子郵件地址" required="required" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$"/> </div> <div class="form-group"> <input name="Birthday" class="form-control" type="date" min="1900-01-01" max="2021-01-01" required="required"/> </div> <div class="form-group"> <input name="Tel" class="form-control" type="text" placeholder="手機號碼(格式:09xx-xxxxxx)" required="required" maxlength="11" pattern="09\d{2}-\d{6}" oninput="setCustomValidity('');" oninvalid="setCustomValidity('請輸入正確的手機號瑪格式:09xx-xxxxxx');"/> </div> <div class="form-group"> <input id="inputPassword" name="Password" class="form-control" type="password" placeholder="設定密碼(格式:含英數至少六個字元)" pattern="^(?=.*[a-zA-Z])(?=.*[0-9]).{6,}$" required="required" oninput="setCustomValidity('');" oninvalid="setCustomValidity('請輸入正確的密碼格式:含英數至少六個字元');"/> </div> <div class="form-group"> <input id="ConfirmPassword" name="ConfirmPassword" class="form-control" type="password" placeholder="確認密碼" required="required" oninput="setCustomValidity('');" onchange="if(document.getElementById('inputPassword').value != document.getElementById('ConfirmPassword').value){setCustomValidity('密碼不吻合');}"/> </div> <input type="submit" value="註冊" class="btn btn-danger btn-block" /> </form> 實際效果如下面的表單,讀者可自行玩看看:
更多 HTML 相關技巧:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP