<center>javascript表单验证</center>_center在表单中-优快云博客

本文链接：https://blog.youkuaiyun.com/mikibiubiu/article/details/96006230

本文详细介绍了一段用于网页表单验证的JavaScript代码，包括用户名、密码、邮箱等字段的合法性检查，以及密码强度提示、邮箱自动补全等功能。通过实际代码展示了如何使用正则表达式进行数据验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js代码

<script type="text/javascript">
	
	var userFlag = false;//true时表示用户名验证通过
	var pwdFlag = false;
    var ntFlag = false;
	var emailFlag = false;
//---------------------------用户名验证-------------------------------------------------------
	function getLength(str){  
				 	// \x00-xff代表单字节字符。  
				 	return str.replace(/[^\x00-\xff]/g, "xx").length;
	} 	
	//获取元素
	var uName =document.getElementById("uname");
	var info_user = document.getElementById("info_user");
	var succ_user = document.getElementById("succ_user");
	var error_user = document.getElementById("error_user");
	var count = document.getElementById('count');  
	var name_length = 0; //会员名   
	//	uname获取焦点时规则提示
	uName.onfocus = function(){
		//规则提示显示
		info_user.style.display="black";
		//成功信息隐藏
		succ_user.style.display = "none";
		//未通过信息隐藏
		error_user.style.display = "none";
	}
	//  失去焦点时,如果不符合验证要求,提示不合法信息
	uName.onkeyup = function(){    
		count.style.visibility = "visible";    
		name_length = getLength(this.value);    
		count.innerHTML = name_length + "个字符";  
				 		
			if(name_length==0){      
				count.style.display = "none"; 
			} 
	}   	
 	uName.onblur = function(){
 						//规则提示隐藏
						info_user.style.display="none";
				 		//含有非法字符                
				 		var reg = /[^\w\u4e00-\u9fa5]/g;    
				 		// \w代表“数字、字母（不分大小写）、下划线”，\u4e00-\u9fa5代表汉字。      
				 		if(reg.test(this.value)){
				 			error_user.style.display = "block";
				 			error_user.innerHTML = '<i class="err"></i>含有非法字符！';
				 			succ_user.style.display = "none"; 
				 		}
				 	//不能为空    
				 	else if (this.value==""){
				 		error_user.style.display = "block";
				 		succ_user.style.display = "none"; 
				 		error_user.innerHTML = "<i class='err'></i>不能为空！";    
				 	}     
				 	//长度超过25个字符    
				 	else if (name_length > 20){ 
				 		error_user.style.display = "block";
				 		succ_user.style.display = "none"; 
				 		error_user.innerHTML = "<i class='err'></i>长度超过20个字符！";    
				 	}     
				 	//长度少于6个字符    
				 	else if (name_length < 2){ 
				 		error_user.style.display = "block";
				 		succ_user.style.display = "none"; 
				 		error_user.innerHTML = "<i class='err'></i>长度少于2个字符！";    
				 	}     
				 	//OK    
				 	else {      
				 		succ_user.style.display = "block";
				 		error_user.style.display = "none";
				 		count.style.visibility = "hidden";    
				 	}  
	} 	
//---------------------密码验证------------------------------------------------------------


	var pwd = document.getElementById("pwd");
	var pwd2 = document.getElementById("pwd2");
	var info_pass = document.getElementById("info_pass");
	var succ_pass = document.getElementById("succ_pass");
	var error_pass = document.getElementById("error_pass");
	var s1 = document.getElementById("s1");//■
	var s2 = document.getElementById("s2");//■
	var s3 = document.getElementById("s3");//■
	var s4 = document.getElementById("s4");//■
	var q1 = document.getElementById("q1");//○  6-20个字符
	var q2 = document.getElementById("q2");//○  只能包含大小写字母、数字和非空格字符
	var q3 = document.getElementById("q3");//○  大、小写字母、数字、非空字符，2种以上
	var pwdReg = /^[a-zA-Z0-9]{6,20}$/;
	var pReg2 = /[a-zA-Z0-9]/;
	var q3Reg1 = /[a-z]/;
	var q3Reg2 = /[A-Z]/;
	var q3Reg3 = /[0-9]/;
	//-----------------------------------------密码强度验证------------------------------------------------
	//正则表达式search()函数.字符串中没有正则表达式要匹配的字符串，此函数返回-1。

	pwd.onkeydown = function(){
		//获取value值
		var pVal = this.value;
		//对value进行验证
		if(pVal.length >= 6 && pVal.length <= 20){
			//当value在6-20个字符q1高亮
			q1.innerHTML = "●";
			//强度验证
			//初级条件 字符6个，1种字符
			//s1高亮 s4.innerHTML = "初级"
			s1.style.color = "green";
			s4.innerHTML = "初级";
			if(pVal.length >= 8 && ((pVal.search(q3Reg1) != -1 && pVal.search(q3Reg2) != -1) || (pVal.search(q3Reg1) != -1 && pVal.search(q3Reg3) != -1) || (pVal.search(q3Reg3) != -1 && pVal.search(q3Reg2) != -1))){
				//中级条件 字符8个，2种字符 
				//s2高亮 s4.innerHTML = "中级"
				s2.style.color = "green";
				s4.innerHTML = "中级";
				if(pVal.length >= 10 && (pVal.search(q3Reg1) != -1 && pVal.search(q3Reg2) != -1 && pVal.search(q3Reg3) != -1)){
					//高级条件 字符10个，3种字符 
					//s3高亮 s4.innerHTML = "高级"
					s3.style.color = "green";
					s4.innerHTML = "高级";
				}else{
					s3.style.color = "#CCCCCC";
					s4.innerHTML = "中级";
				}
				
			}else{
				s2.style.color = "#CCCCCC";
				s4.innerHTML = "初级";
			}
		}else{
			//q1出取消高亮
			q1.innerHTML = "○";
			s1.style.color = "#CCCCCC";
			s4.innerHTML = "";
		}
		//只s包含大小写字母、数字q2高亮
		if(pReg2.test(pVal)){
			q2.innerHTML = "●";
		}else{
			q2.innerHTML = "○";
		}
		//大、小写字母、数字、非空字符，2种以上q2高亮
		if((pVal.search(q3Reg1) != -1 && pVal.search(q3Reg2) != -1) || (pVal.search(q3Reg1) != -1 && pVal.search(q3Reg3) != -1) || (pVal.search(q3Reg3) != -1 && pVal.search(q3Reg2) != -1)){
			q3.innerHTML = "●";
		}else{
			q3.innerHTML = "○";
		}
	}
	
	//	pwd获取焦点时规则提示
	pwd.onfocus = function(){
		//规则提示显示
		info_pass.style.display = "block";
		//成功信息隐藏
		succ_pass.style.display = "none";
		//未通过信息隐藏
		error_pass.style.display = "none";
	}
//	失去焦点时，如果不符合验证要求，提示不合法信息
	pwd.onblur = function(){
		//验证密码是否合法
		//规则提示隐藏
		info_pass.style.display = "none";
		if(checkPass()){//true通过
			pwdFlag = true;
			//成功信息显示
			succ_pass.style.display = "block";
		}else{//未通过验证
			//未通过信息显示
			error_pass.style.display = "block";
			pwdFlag = false;
		}
	}
	//验证密码是否合法
	function checkPass(){
		//获取value值
		var pVal = pwd.value;
		//对value值进行正则验证
		if(pwdReg.test(pVal)){//true通过
			//如果通过 返回true
			return true;
		}
		//未通过返回false
		return false;
	};
	//------------------------------确认密码 --------------------------------------------------  
	var nt=document.getElementsByName("notpass")[0];
	var info_notpass=document.getElementById("info_notpass");//请再一次输入密码！
	var error_notpass=document.getElementById("error_notpass");//密码不一致，请重新输入!
	var succ_notpass=document.getElementById("succ_notpass");//可用
	nt.onfocus=function(){//聚焦显示
        info_notpass.style.display="block"
    };
    nt.onblur=function(){//onblur 事件会在对象失去焦点时发生。
        //console.log(pwd.value)
        var nval=nt.value;
        info_notpass.style.display="none";
        if(nval==pwd.value && nval != ""){
            succ_notpass.style.display="block"
            error_notpass.style.display="none"
            ntFlag=true;
            return true;
        }else{
            succ_notpass.style.display="none"   
            error_notpass.style.display="block"
            ntFlag=false;
            return false;
        }
        
    }
    
//------------------------------------邮箱验证------------------------------------------------------
    var email = document.getElementById("email");
	var info_email = document.getElementById("info_email");
	var error_email = document.getElementById("error_email");
	var succ_email = document.getElementById("succ_email");
	var all_email = document.getElementById("all_email");
	var all_email_li = all_email.children;
	var emailText = document.getElementsByClassName("emailText");
	
	
	
	
	var emailReg = /^\w{3,20}@[0-9a-zA-Z]{2,6}(\.[a-zA-Z]{2,3}){1,2}$/;
	
		//	email获取焦点时规则提示
	email.onfocus = function(){
		//规则提示显示
		info_email.style.display = "block";
		//成功信息隐藏
		succ_email.style.display = "none";
		//未通过信息隐藏
		error_email.style.display = "none";
	}
//	失去焦点时，如果不符合验证要求，提示不合法信息
	email.onblur = function(){
		//验证邮箱是否合法
		//规则提示隐藏
		info_email.style.display = "none";
		
		if(checkEmail()){//true通过
			emailFlag = true;
			//成功信息显示
			succ_email.style.display = "block";
			error_email.style.display = "none";
		}else{//未通过验证
			//未通过信息显示
			error_email.style.display = "block";
			succ_email.style.display = "none";
			emailFlag = false;
		}
	}
	
	/*var obj = {};
	obj.onclick = function(){};
	obj.onclick();*/
	
	//验证邮箱是否合法
	function checkEmail(){
		//获取value值
		var eVal = email.value;
		//对value值进行正则验证
		if(emailReg.test(eVal)){//true通过
			//如果通过 返回true
			return true;
		}
		//未通过返回false
		return false;
	}
	
	//------------邮补全系统--------------
	var index = 0;
	//键盘按下时显示邮箱列表
	email.onkeyup = function(e){
		var e = e || event;
		var code = e.keyCode || e.which || e.charCode;
		//显示邮箱列表
		all_email.style.display = "block";
		//把email的value给
		var eVal = this.value;
		
		if(eVal.indexOf("@") != -1){
			eVal = eVal.split("@")[0];
		}
		
		for (var i = 0; i < emailText.length; i++) {
			emailText[i].innerHTML = eVal;
		}
		
		for (var i = 0; i < all_email_li.length; i++) {
			all_email_li[i].style.background = "white";
		}
		switch(code){
			case 38://向上
			//向上查找li,li背景高亮表示选中
			//先找最后一个
			//all_email_li.style.background="white";
			if(index==-1){
				index=emailText.length-1;
			}else if(index==0){
				index=emailText.length-1;
			}else{
				index--;
			}
			all_email_li[index].style.background = "#ccc";
			break;
			
			case 40:
				//向下查找li，li背景高亮表示选中
				//先找第一个
				if(index == 6){
					index = 0;
				}else{
					index++;
				}
				all_email_li[index].style.background = "#ccc";
				
				break;
			case 13:
				//把当前的li所有的文本内容给email文本框
				email.value = all_email_li[index].innerText;
				//对email.value进行验证
				email.onblur();
				//
				document.onclick();
				
				break;
		}
		
	}
	
	//
	all_email.onmouseover = function(e){
		var e = e || event;
		var target = e.target || e.srcElement;
		if(target.nodeName == "LI"){
			for (var i = 0; i < all_email_li.length; i++) {
				all_email_li[i].style.background = "white";
			}
			target.style.background = "#CCC";
			target.onclick = function(){
				//把当前的li所有的文本内容给email文本框
				//alert(this.innerText);
				email.value = this.innerText;
				//当前的all_email要隐藏
				//对email.value进行验证
				email.onblur();
				
			}
		}
	}
	
	document.onclick = function(){
		all_email.style.display = "none";
	}
//-----------------------------------------年月日-----------------------------------------
	/*
	 * <dd class="birthday">生  &nbsp; &nbsp; &nbsp;  日：
			<select id="year" name="year">
				<option value="0">-年-</option>
			</select>-
			<select id="month" name="month">
				<option value="0">-月-</option>
			</select>-
			<select id="day" name="day">
				<option value="0">-日-</option>
			</select>
			<span class="error error_birthday">尚未全部选择，请选择!</span>
		</dd> 
	 */
	var year = document.getElementById("year");
	var month = document.getElementById("month");
	var day = document.getElementById("day");
	//页面加载时，加载年份
	for (var i = 1900; i <= 2300; i++) {
		var options = new Option(i,i);
		//console.log(options);
		year.appendChild(options);
	}
	year.onchange = function(){
		//console.log(month.options.length)
		month.options.length = 1;
		day.options.length = 1;
		if(this.value == 0){
			return;
		}
		for (var i = 1; i <= 12; i++) {
			var options = new Option(i,i);
			month.appendChild(options);
		}
	}
	month.onchange = function(){
		day.options.length = 1;
		var yVal = year.value;
		var mVal = this.value;
		switch(mVal){
			case "1":
			case "3":
			case "5":
			case "7":
			case "8":
			case "10":
			case "12":
				getDays(31);
				break;
			case "4":
			case "6":
			case "9":
			case "11":
				getDays(30);
				break;
			case "2":
				if(yVal % 4 == 0 && yVal % 100 != 0 || yVal % 400 == 0){
					getDays(29);
				}else{
					getDays(28);
				}
				break;
		}
	}
	
	function getDays(days){
		for (var i = 1; i <= days; i++) {
			var options = new Option(i,i);
			day.appendChild(options);
		}
	}
//------------------------------------------备注------------------------------------------------------
	var tarea = document.getElementById("tarea");
	var num = document.getElementById("num");
	var okNum = document.getElementById("okNum");
	var errNum = document.getElementById("errNum");
	var moreNum = document.getElementById("moreNum");
	var clear = document.getElementById("clear");
	tarea.onkeyup = function(){
		var tVal = this.value;
		num.innerHTML = 200 - tVal.length;
		if(num.innerHTML < 0 ){
			okNum.style.display = "none";
			errNum.style.display = "block";
			moreNum.innerHTML = tVal.length - 200;
		}else{
			okNum.style.display = "block";
			errNum.style.display = "none";
		}
	}
	clear.onclick = function(){
		tarea.value = tarea.value.substr(0,200); 
		errNum.style.display = "none";
		okNum.style.display = "block";
		num.innerHTML = 0;
	}
	
	
	//当点击提交按钮，表单验证只要有一个未通过验证，无法提交
	//var sub = $id("sub"); submit按钮本身就有一个默认提交功能
	//提交事件在form中触发。
	var sub=document.getElementById("sub");
	form.onsubmit = function(){
		//alert(1)
		//表单验证只要有一个未通过验证，无法提交
		//if(用户名验证通过 && 密码通过 && 邮箱通过){
		if(userFlag && pwdFlag && emailFlag && ntFlag){
			return true;
		}else{
			return false;
		}
	}	
</script>

css部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="index.css"/>
	</head>
	<body>
		<div id="reg">
			<h2><img src="img/close.png" alt="关闭" class="close" />会员注册</h2>
			<form id="form" action="#" name="reg">
			<dl>
				<dd>用 &nbsp;户 &nbsp;名：<input id="uname" type="text" name="user" class="text"/>
					<span id="info_user" class="info info_user">请输入用户名，2~20位，由字母、数字和下划线组成</span>
					<span id="error_user" class="error error_user">输入不合法，请重新输入!</span>
					<span id="succ_user" class="succ succ_user">可用</span>
					<span id="loading" class="loading">正在检测用户名...</span><br />
					<span><label for=""><span></span><b id="count">0个字符</b></label></span>
				</dd>
				<dd>密  &nbsp; &nbsp; &nbsp;  码：<input id="pwd" type="password" name="pass" class="text"/>
					<span id="info_pass" class="info info_pass">
						<p>安全级别：<strong id="s1" class="s s1">■</strong> <strong id="s2" class="s s2">■</strong> <strong id="s3" class="s s3">■</strong> <strong id="s4" class="s s4" style="font-weight: normal;"></strong></p>
						<p><strong id="q1" style="font-weight: normal;">○</strong> 6-20个字符</p>
						<p><strong id="q2" style="font-weight: normal;">○</strong> 只能包含大小写字母、数字和非空格字符</p>
						<p><strong id="q3" style="font-weight: normal;">○</strong> 大、小写字母、数字、非空字符，2种以上</p>
					</span>
					<span id="error_pass" class="error error_pass">输入不合法，请重新输入!</span>
					<span id="succ_pass" class="succ succ_pass">可用</span>
				</dd>
				<dd>密码确认：<input id="pwd2" type="password" name="notpass" class="text"/>
					<span id="info_notpass" class="info info_notpass">请再一次输入密码！</span>
					<span id="error_notpass" class="error error_notpass">密码不一致，请重新输入!</span>
					<span id="succ_notpass" class="succ succ_notpass">可用</span>
				</dd>
				<dd>提  &nbsp; &nbsp; &nbsp;  问：
					<select name="ques">
					    <option value="0">----请选择----</option>
						<option value="1">--您最喜欢吃的菜</option>
						<option value="2">--您的狗狗的名字</option>
						<option value="3">--您的出生地</option>
						<option value="4">--您最喜欢的明星</option>
				    </select>
				    <span class="error error_ques">尚未选择提问，请选择!</span>
				</dd> 
				<dd>回  &nbsp; &nbsp; &nbsp;  答：<input type="text" name="ans" class="text"/>
					<span class="info info_ans">请输入回答，2~32位！</span>
					<span class="error error_ans">回答不合法，请重新输入!</span>
					<span class="succ succ_ans">可用</span>
				</dd> 
				<dd>电子邮件：<input id="email" type="text" name="email" class="text" autocomplete="off"/>
					<span id="info_email" class="info info_email">请输入电子邮箱！</span>
					<span id="error_email" class="error error_email">邮箱不合法，请重新输入!</span>
					<span id="succ_email" class="succ succ_email">可用</span>
					<ul id="all_email" class="all_email">
						<li><span class="emailText"></span>@qq.com</li>
						<li><span class="emailText"></span>@163.com</li>
						<li><span class="emailText"></span>@souhu.com</li>
						<li><span class="emailText"></span>@sina.com.cn</li>
						<li><span class="emailText"></span>@gmail.com</li>
						<li><span class="emailText"></span>@yahoo.com.cn</li>
						<li><span class="emailText"></span>@yeah.net</li>
					</ul>
				</dd>
				<dd class="birthday">生  &nbsp; &nbsp; &nbsp;  日：
					<select id="year" name="year">
						<option value="0">-年-</option>
					</select>-
					<select id="month" name="month">
						<option value="0">-月-</option>
					</select>-
					<select id="day" name="day">
						<option value="0">-日-</option>
					</select>
					<span class="error error_birthday">尚未全部选择，请选择!</span>
				</dd> 
				<dd style="height: 105px;"><span style="vertical-align: 85px;">备  &nbsp; &nbsp; &nbsp;  注：</span><textarea id="tarea" name="ps"></textarea></dd>
				<dd id="okNum" style=" display: block;" class="ps">还能输入<strong id="num" class="num">200</strong>字</dd>
				<dd id="errNum" style=" display: none;" class="ps">已超过<strong id="moreNum" class="num"></strong>字，<span id="clear" class="clear">清尾</span></dd>
				<dd style="padding: 0 0 0 65px;"><input id="sub" type="submit" name="sub" class="submit"/></dd>
			</dl>
			</form>
		</div>
	</body>
</html>