JavaScript表單及正則表達(dá)式驗(yàn)證實(shí)例代碼

更新時(shí)間：2025年07月21日 09:38:24 作者：風(fēng)中飄爻

正則表達(dá)式在JavaScript中可是個(gè)強(qiáng)大的工具,能幫助我們進(jìn)行復(fù)雜的字符串匹配、查找和替換,這篇文章主要介紹了JavaScript表單及正則表達(dá)式驗(yàn)證的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下

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

注：{ return false }為阻止表單提交，但如果整體代碼無(wú)錯(cuò)，{ return true ｝則通過(guò)，提交表單。

效果：

賬號(hào)和密碼獲取/失去焦點(diǎn)演示：

         // 賬號(hào)獲取焦點(diǎn)事件
			document.getElementById('zh').onfocus = function() {
				// let = zh = this.value;
				this.nextElementSibling.innerHTML = "";
			}
			// 賬號(hào)失去焦點(diǎn)事件
			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";
 			}
            // 密碼獲取焦點(diǎn)事件
			document.getElementById('mm').onfocus = function() {
				// let = zh = this.value;
				this.nextElementSibling.innerHTML = "";
			}
			// 密碼失去焦點(diǎn)事件
			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";
			}

注：注意看賬號(hào)和密碼的代碼格式內(nèi)容，兩者設(shè)置的自定義不同，并非全部都是一樣

效果：

密碼：

注:當(dāng)內(nèi)容存在焦點(diǎn)時(shí)則有判斷，有內(nèi)容則成立，無(wú)內(nèi)容則錯(cuò)誤，不成立，無(wú)法進(jìn)行表單提交

正則表達(dá)式：

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

例：

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

效果：

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

例：

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

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

以正則表達(dá)式為方法的登錄界面：

注：（效果與表單驗(yàn)證同理，但是在其基礎(chǔ)上用正則表達(dá)式的方式進(jìn)行使用。）

<form id="ff" action="">
			<h1>用戶登錄</h1>
			賬號(hào)：<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(){
				// 定義賬號(hào)的驗(yàn)證規(guī)則
				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="對(duì)";
				}else{
					zh.nextElementSibling.style="color:green";
					zh.nextElementSibling.innerHTML="錯(cuò)";
				}
				var password = rex2.test(mm.value);
				console.log(password);
				if(password){
					mm.nextElementSibling.style="color:blue";
					mm.nextElementSibling.innerHTML="對(duì)";
				}else{
					mm.nextElementSibling.style="color:green";
					mm.nextElementSibling.innerHTML="錯(cuò)";
				}
				return username&&password;
			}

注：關(guān)鍵點(diǎn)：return username&&password;

效果：

注：未輸入內(nèi)容時(shí)的效果；

注：輸入內(nèi)容與為輸入內(nèi)容時(shí)的對(duì)照。

密碼安全級(jí)別強(qiáng)度驗(yàn)證：

document.getElementById('mm1').onkeyup=function(){
			let c = 0;
			var rex1 = /^.*\d.*$/;  //包含數(shù)字
			var rex2 = /^.*[a-z].*$/; //包含字母
			var rex3 = /^.*[A-Z].*$/; //包含大寫字母
			var rex4 = /^.*[@.].*$/; //包含特殊符號(hào)
			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=['弱','中等','強(qiáng)','超強(qiáng)']
			if(m.length==0){
				this.nextElementSibling.innerHTML="";
			}else{
				this.nextElementSibling.innerHTML=arr[c-1];
			}
			
		}

效果：

釋義：

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

注：c-1 ：由強(qiáng)至弱反向，由弱至強(qiáng)正向，

總結(jié)：希望本篇有關(guān)于JavaScript表單驗(yàn)證和正則表達(dá)式的知識(shí)點(diǎn)內(nèi)容能對(duì)你帶來(lái)一定的幫助，同時(shí)非常感謝各位大佬們的點(diǎn)贊與支持，咱們下一篇不見不散。