今天我要介紹的是在JavaScript中關于表單驗證內容的知識點介紹：

關于表單驗證，我接下來則直接將內容以及效果顯示出來并作注解，這樣可以清晰看見這個表達驗證的妙用：

<form id="ff" action="https://www.baidu.com"><h1>用戶登錄</h1>賬號：<input type="text" id="zh" /> <span></span> <br />密碼：<input type="password" id="mm" /><span></span> <br /><Button>登錄</Button></form>

效果：

? ? ? ?注：可以看到這是一個非常經典的登錄界面的制作，下面我會逐一介紹他們內部的方法使用以及代碼顯示的效果；

onclick: 點擊事件? ?//ondblclick: 雙擊事件?// onsubmit: 表單提交事件?// onblur: 失去焦點事件?// onfocus: 獲取焦點事件。

注： 這是事件點擊使用的方法代碼；

表單提交的代碼演示：

document.getElementById('ff（自定義）').onsubmit = function() {console.log('觸發了onsubmit');// 獲取表單中的賬號和密碼let zh = document.getElementById("zh").value;let mm = document.getElementById("mm").value;// 判斷賬號及密碼是否為空if (zh.length == 0 || mm.length == 0) {alert('請輸入正確的賬號或密碼')// 自定義彈出框document.querySelector('.mask').style.display = "block";return false;}// 以下結果為true 表允許表單提//交到指定頁面，反之則不能，且只能實現所輸入的結果return true;}

?注：{? return false? }為阻止表單提交，但如果整體代碼無錯，{?return true?｝則通過，提交表單。

效果：

?

賬號和密碼獲取/失去焦點演示：

         // 賬號獲取焦點事件document.getElementById('zh').onfocus = function() {// let = zh = this.value;this.nextElementSibling.innerHTML = "";}// 賬號失去焦點事件document.getElementById('zh').onblur = function() {let = zh = this.value;let f = zh.length == 0;console.log(zh);this.nextElementSibling.innerHTML = f ? "×" : "√";// this.nextElementSibling.style.display=f?"block":"none";}// 密碼獲取焦點事件document.getElementById('mm').onfocus = function() {// let = zh = this.value;this.nextElementSibling.innerHTML = "";}// 密碼失去焦點事件document.getElementById('mm').onblur = function() {let = zh = this.value;let f = zh.length == 0;console.log(zh);this.nextElementSibling.innerHTML = f ? "×" : "√";// this.nextElementSibling.style.display=f?"block":"none";}

?注：注意看賬號和密碼的代碼格式內容，兩者設置的自定義不同，并非全部都是一樣

效果：

?密碼：

?注:當內容存在焦點時則有判斷，有內容則成立，無內容則錯誤，不成立，無法進行表單提交

?正則表達式：

<!-- 正則表達式是用于對數據格式進行判斷 -->
?? ??? ?<!-- 定義正則表達式： var rex = /^\d$\(\d表0-0的數字) -->
?? ??? ?
?? ??? ?<!-- 1.內容（以\開頭） -->
?? ??? ?<!-- \d：表0-9的數字 -->
?? ??? ?<!-- \w：表0-9a-zA-Z_ -->? ? ? （非：不是，表示否定之意，這里注意）
?? ??? ?<!-- \D：表非0-9的數字 -->
?? ??? ?<!-- \W：表非0-9a-zA-Z -->
?? ??? ?<!-- .表任意一個單個字符 -->
?? ??? ?
?? ??? ?<!-- 2.字符出現速度 -->
?? ??? ?<!-- ?表0 or 一次 -->
?? ??? ?<!-- +表一次或者多次 -->
?? ??? ?<!-- *表0此或多次 -->
?? ??? ?<!-- \d{5}表五個數字 -->
?? ??? ?<!-- \d{5,10}表至低五個，至高十個 -->

?例：

// 例一：var rex = /^[A-Z]{1}\w{5,11}$/console.log(rex.test('Zking1234'));

效果：

?注：開頭小寫不成立，不滿足；

例：

// // QQ號案例1184995259@qq.comvar rex1 = /^\d{5,12}@qq.com$/console.log(rex.test('1136889226@qq.com'));

注:后面的??@qq.com? 為固定值

以正則表達式為方法的登錄界面：

注：（效果與表單驗證同理，但是在其基礎上用正則表達式的方式進行使用。）

<form id="ff" action=""><h1>用戶登錄</h1>賬號：<input type="text" id ="zh" /> <span></span> <br />密碼：<input type="text" id="mm" /><span></span> <br /><Button>登錄</Button></form><input type="text" id ="mm1"  /><span></span>document.getElementById("ff").onsubmit=function(){// 定義賬號的驗證規則var rex1 = /^[a-z]{5,10}$/// 定義密碼 var rex2 = /^[a-z0-9A-Z.]{5,10}$/var username = rex1.test(zh.value);console.log(usernam);if(username){zh.nextElementSibling.style="color:blue";zh.nextElementSibling.innerHTML="對";}else{zh.nextElementSibling.style="color:green";zh.nextElementSibling.innerHTML="錯";}var password = rex2.test(mm.value);console.log(password);if(password){mm.nextElementSibling.style="color:blue";mm.nextElementSibling.innerHTML="對";}else{mm.nextElementSibling.style="color:green";mm.nextElementSibling.innerHTML="錯";}return username&&password;}

注：關鍵點：return username&&password;??

效果：

?注：未輸入內容時的效果；

注：輸入內容與為輸入內容時的對照。

密碼安全級別強度驗證：

document.getElementById('mm1').onkeyup=function(){let c = 0;var rex1 = /^.*\d.*$/;  //包含數字var rex2 = /^.*[a-z].*$/; //包含字母var rex3 = /^.*[A-Z].*$/; //包含大寫字母var rex4 = /^.*[@.].*$/; //包含特殊符號let m = this.value;if(rex1.test(m)){c++;}if(rex2.test(m)){c++;}if(rex3.test(m)){c++;}if(rex4.test(m)){c++;}let arr=['弱','中等','強','超強']if(m.length==0){this.nextElementSibling.innerHTML="";}else{this.nextElementSibling.innerHTML=arr[c-1];}}

效果：

釋義：

let arr=['弱','中等','強','超強']if(m.length==0){this.nextElementSibling.innerHTML="";}else{this.nextElementSibling.innerHTML=arr[c-1];   《==}

注：c-1 ：由強至弱反向，由弱至強正向，

總結：希望本篇有關于JavaScript表單驗證和正則表達式的知識點內容能對你帶來一定的幫助，同時非常感謝各位大佬們的點贊與支持，咱們下一篇不見不散。