鲲鹏周记——js学习小测试表单验证

最新推荐文章于 2025-07-28 14:58:12 发布

原创最新推荐文章于 2025-07-28 14:58:12 发布 · 184 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #dom

萌新周记专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的表单验证示例，包括用户名、密码和邮箱的验证。验证规则包括用户名长度限制、密码格式检查以及邮箱格式校验。在用户离开输入框时触发验证，并在输入框聚焦时清除错误提示。

js学习小测试表单验证要求：

在这里插入图片描述
实现过程：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	<style type="text/css">    /* 忘记了style属性  */
		
		span{
			color: red;
			size: 12px;
			
			}
		
		
	</style>
		
		<script type="text/javascript">
			
			window.onload = function(){
				
				var name = document.getElementById("uname");
	
				name.onblur = function(){                       // 事件句柄，忘记加on *****
				
				   var  nameValue = name.value.trim();  //我没有想到
				
					var span1 =  document.getElementById("span1");
					
					if(nameValue==""||nameValue==null){
						
						span1.innerHTML = "用户名不能为空";	
					}	
					else if(nameValue.length<6||nameValue.length>14){
						span1.innerHTML = "用户名长度必须为6-14位";
					}		
				}	

				name.onfocus = function(){
			
			if(span1.innerHTML != ""){
				name.value = "";
				}
	
			span1.innerHTML = "";
				}
				
				// 关于用户名的验证已经结束*****************************************************************
				
				
				
				var pwd1 = document.getElementById("pwd");
	
				 pwd1.onblur = function(){
					
					var regExp = new RegExp("^[0-9,A-Z,a-z]*$","g"); //g全局匹配 i忽略大小写
					var flag = regExp.test(pwd1.value);
					var span2 =  document.getElementById("span2");
					if(flag==false){
						
						span2.innerHTML = "密码格式不对";
				 }
			
				pwd1.onfocus = function(){
				
				if(span2.innerHTML != ""){
					pwd1.value = "";
					}
				span2.innerHTML = "";
					}
					
				// pwd1的密码格式验证结束
				
				
				var pwd2 = document.getElementById("pwd2");
					
				pwd2.onblur = function(){
			
				var span3 =  document.getElementById("span3");
			
					if(pwd1.value != pwd2.value){
		
						span3.innerHTML = "两次密码不一致";
						
					}
		
				}
				
				
				pwd2.onfocus = function(){
					
					if(span3.innerHTML != ""){
						pwd2.value = "";
						}
					span3.innerHTML = "";
						}
					
				}
				
				// pwd相关密码验证结束
				
				var email = document.getElementById("email");
				email.onblur = function(){
		
					    var emailValue =	email.value;
						var regExp2 = new RegExp("^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$","g"); //g全局匹配 i忽略大小写
						var flag2 = regExp2.test(emailValue);
						var span4 = document.getElementById("span4");  //范围问题，放到了for循环中
						if(flag2 == false ){
							
							span4.innerHTML = "不符合邮箱格式";
						}
						
						}
						
						email.onfocus = function(){
							
							if(span4.innerHTML != ""){
								email.value = "";
								}
							span4.innerHTML = "";
								}
								
								
				var btn = document.getElementById("btn");
				var userform = document.getElementById("userform");
				
				btn.onclick = function(){
					
					name.focus();  //注意不用加on ，
					name.blur();
					
					pwd1.focus();
					pwd1.blur();
					
					pwd2.focus();
					pwd2.blur();
					
					email.focus();
					email.blur();
					
					
					
				
				
				if(span1.innerHTML==""&&span2.innerHTML==""&&span3.innerHTML==""&&span4.innerHTML==""){	
					userform.submit();
					
				}
								
					}			
								
								
								
								
								
								
							
						}
				
			
			
			
			
			
			
		</script>
		
	</head>
	<body>
		<form id = "userform" action="http://www.baidu.com" method="get">
		用户名：&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" id="uname" />   <span id="span1"></span> <br>
		密码：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="password" id="pwd" /><span id="span2"></span> <br>
		确认密码：<input type="password" id="pwd2"  /> <span id="span3"></span><br>
		邮箱 :&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" id="email"  placeholder="邮箱格式" /><span id="span4"></span> <br>
		<input type="reset" value="重置" />
		<input type="button" value="注册" id="btn" />
		</form>
	</body>
</html>