有哪些常見的驗證表單方式,他們各自的優缺點是什麼？

這裏是修真院前端小課堂，每篇分享文從

【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴展思考】【更多討論】【參考文獻】

八個方面深度解析前端知識/技能，本篇分享的是：

【有哪些常見的驗證表單方式,他們各自的優缺點是什麼？】

 

目錄
1.背景介紹
2.知識剖析
3.常見問題
4.解決方案
5.編碼實戰
6.擴展思考
7.參考文獻
8.更多討論

1.背景介紹
JavaScript 可在數據被送往服務器前對 HTML 表單中的這些輸入數據進行驗證。以減輕後臺數據傳送壓力，提升數據傳送的質量和效率。

2.知識剖析
如何使用表單驗證

原生js:獲取input內容，if/switch判斷，配合正則dom操做等實現目標

優勢：靈活，減小加載時間；缺點：代碼量大

js第三方插件：例如Bootstrap Validator

優勢：代碼量少；缺點：須要加載第三方js，樣式比較固定

3.常見問題
表單驗證有哪幾種方式

1.實時判斷

2.離開焦點

3.提交時驗證

4.解決方案
5.代碼實戰
JS表單驗證
<p>是否填寫以及長度限制</p>
<form name="a" onsubmit="return test()"><!--onsubmit表示表單提交時執行一段js代碼，當該事件觸發的函數中返回false時，表單就不會被提交，不能掉了return，不然表單永遠會提交。-->
    <input type="text" name="b" placeholder="不超過5個字符"  onkeyup="keyUp()" >
    

    <input type="submit" name="Submit" value="check">
</form>1234567

 
  function test() {
        if (document.a.b.value == null || document.a.b.value == "") {
            console.log("請輸入字符");
            return false;
        }
        if (document.a.b.value.length > 5) {
            console.log("不能超過5個字符！");
            return false;
        }
    }
function onBlur() {//失去焦點
    if (document.a.b.value == null || document.a.b.value == "") {
        console.log("請輸入字符");
        return false;
    }
    if (document.a.b.value.length > 5) {
        console.log("不能超過5個字符！");
        return false;
    }
}

function keyUp() {//按鍵後判斷
    if (document.a.b.value == null || document.a.b.value == "") {
        console.log("請輸入字符");
        return false;
    }
    if (document.a.b.value.length > 5) {
        console.log("不能超過5個字符！");
        return false;
    }

}1234567891011121314151617181920212223242526272829303132
6.擴展思考
他們的優缺點
提交時驗證：

優勢:性能上更好；缺點：假如輸入項過多的話，會影響用戶體驗

適合登錄帳號時檢測輸入內容是否合法

onBlur:

優勢：用戶體驗好；缺點：必須鼠標點擊別處後才能知道結果

常見於輸入驗證碼，註冊等功能

onKeyup:

優勢：反應迅速，體驗佳；缺點：用在某些地方可能看起來很蠢或影響性能，好比正在輸入驗證碼或者檢測是否重名等

適用於檢測數據類型，好比註冊頁面的密碼項

7 .參考文獻
        <p>https://www.oschina.net/trans...;/p>1
8.更多討論
還有那些常見的判斷方式?

Q:如今通常企業用的是什麼類型的表單驗證？

A:騰訊阿里百度都是用的失去焦點驗證，京東是實時驗證

Q:防點擊如何實現的，他有什麼做用？

A:在angular中ng-disable爲true的時候就會沒法點擊，因此咱們須要與表單驗證綁定起來再作一個取反判斷便可，它能夠更加人性化，使用戶免於多餘操做

Q：爲何要永novalidate

是在本身編寫表單驗證插件的時候（如jquery.validate,angular），爲了不和默認的表單驗證衝突，