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>

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;
			}

         // 账号获取焦点事件
			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.com
			 var rex1 = /^\d{5,12}@qq.com$/
			 console.log(rex.test('1136889226@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;
			}

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];   《==
			}