有哪些常見的驗證表單方式，他們各自的優缺點是什麼？
這裡是修真院前端小課堂，每篇分享文從
【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴充套件思考】【更多討論】【參考文獻】
八個方面深度解析前端知識/技能，本篇分享的是：
【有哪些常見的驗證表單方式，他們各自的優缺點是什麼？】
大家好，我是IT修真院武漢分院web第17期的學員吳三水，一枚正直純潔善良的web程式設計師。
今天給大家分享一下，修真院官網js（職業）任務十，深度思考中的知識點——有哪些常見的驗證表單方式，他們各自的優缺點是什麼？
1.背景介紹
表單驗證是javascript中的高階選項之一。
表單資料一般都通過瀏覽器端的Javascript 驗證。瀏覽器端的驗證速度快，若有不符合要求的輸入，響應資訊快速的返回給使用者。由於驗證資料不需要提交給伺服器，不會加重伺服器的負載。
2.知識剖析
什麼是表單驗證？表單驗證的作用
訪問任何一個帶登錄檔單的網站，你都會發現，當你提交沒有輸入任何資訊的表單時，註冊頁面都會給你提交一個反饋，它告訴你提交了錯誤的資料，這些資訊可能看起來像下面這樣的：
“該欄位是必填的”（該欄位不能留空）
“請輸入你的電話號碼，它的格式是：xxx-xxxx”（它要求你輸入的資料格式為三個數字接一個橫槓，然後再接著是四個數字）
“請輸入一個合法的郵箱地址”（如果你輸入的資料不具有“[email protected]“的郵箱格式）
“你的密碼長度應該是8至30位的，並且至少應該包含一個大寫字母、一個符號以及一個數字”
這就是表單驗證 —— 當你向 Web 應用提交資料時，應用會校驗你輸入的資料是否是正確的。如果驗證通過，則這些資料可能會被儲存至資料庫中（通常都是這樣的）或者執行下一步操作，如果校驗未通過，則 Web 應用會提示你有錯誤的資料，並且一般都會明確的告訴你錯誤發生在哪裡。表單驗證可以通過許多不同的方式實現。
3.常見問題
常見的表單驗證方式
1.輸入時進行實時驗證(.KEYDOWN)
2.離開(失去)焦點時驗證(.ONBLUR)
3.提交表單時驗證
4.解決方案
5.程式碼實戰
1.輸入時進行實時驗證
2.離開（失去)焦點時驗證
3.是否填寫以及長度限制
提交
6.拓展思考
這些驗證的優缺點各是什麼？
1.輸入時進行實時驗證(.keydown)**
優點: 只要有輸入就會開始進行驗證，隨著輸入的實時給予使用者驗證反饋，反應速度快。
缺點：影響一些效能，比如正在輸入驗證碼或者檢測是否重名等，頻繁出現的驗證錯誤影響使用者體驗。
適用於檢測資料型別，比如註冊頁面的密碼項
2.失去焦點驗證（.onBlur)
優點: 使用者體驗好比第一種要好一點
缺點：必須輸入框失去焦點(即滑鼠點選別處，或tab鍵）後才能知道結果
常見於輸入驗證碼，註冊等功能
3.提交時驗證
優點: 效能上更好，可以降低伺服器壓力
缺點：如果輸入項過多的話，使用者體驗會很差
適合登陸賬號時檢測輸入內容是否合法
7.參考文獻
有哪些常見的驗證表單方式,他們各自的優缺點是什麼？
表單資料校驗
8.更多討論
常見問題：
1.一些常見的大型網站用的都是什麼型別的表單驗證？
答：京東是實時驗證，騰訊、阿里、百度用的失去焦點驗證。
2.為什麼會有的Input會無法輸入?
答：它使用了disable這個屬性，它特性是為滿足條件禁用此表單，因此我們可以很靈活的選擇禁用input或者滿足一些特定條件才可以使用input
3.表單驗證有幾種寫法？
答：我們目前比較流行的表單驗證寫法有：
1.js原生寫法：
利用if/switch/或者正則表示式/+DOM操作來進行表單驗證的製作。
優點：相比於第三方庫，可以減少載入的js檔案大小，樣式靈活,適用於表單少/格式簡單/對效能需求高的網站。
缺點：程式碼量大，耗時多。
2.第三方外掛
利用js第三方外掛來進行網站的表單驗證
優點：全站適用，手工程式碼量少。
缺點：有可能加重伺服器負擔，樣式相對固定
3.HTML5內建的校驗
優點：不需要javascript,用自帶的html就可以進行驗證，而且效能好
缺點：不能自定義驗證，也不夠靈活。
鳴謝！
更多內容，可以加入IT交流群565734203與大家一起討論交流
這裡是技能樹·IT修真院：https://www.jnshu.com，初學者轉行到網際網路的聚集地