表单验证--用户注册页面

最新推荐文章于 2022-10-11 20:17:18 发布

怪我太贪心

最新推荐文章于 2022-10-11 20:17:18 发布

阅读量2k

点赞数 3

本文链接：https://blog.csdn.net/qq_45580938/article/details/100519876

版权

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		#box{
			border: 3px solid red ;
				width: 600px;
				margin: 0 auto;/*水平居中*/
				padding-left: 80px;/*内边距*/
		}
			
			h1{
				
				margin-left: 150px ;
				
			}
			/*
			 label:first-child   获取第一个label元素
			 label:行内元素
			 * */
			p label:first-child{
				width: 100px;
				display: inline-block;/*内联块级元素*/
				
			}
			input{
				font-size: 20px;
			}
			
			
		</style>
		<script type="text/javascript">
		//定义标记，定义成全局变量
		var nameFlag=pwdFlag=emailFlag=ageFlag=phoneFlag=false;
			function $(id){
				return document.getElementById(id);
			}
			function check(){
				//对标记进行判断
				if(nameFlag&&pwdFlag&&emailFlag&&ageFlag&&phoneFlag){
					alert("恭喜您，注册成功！");
					return true;
				}else{
					alert("注册失败！");
					return false;
				}
			}
			//封装一下代码
			/*
			 focus()函数：让光标停留在文本框里面，用户下一次不用再次点击文本框了
			 */
			function afterCheck(obj,content,color,focus){
				//oname对象的下一个兄弟元素s1
				obj.nextElementSibling.innerHTML=content;
				obj.nextElementSibling.style.color=color;
				if(focus){
					obj.focus();
				}
			}
				
			window.onload= function(){
				//获取DOM对象
				var oname=$("name");
				var opwd1=$("pwd1");
				var opwd2=$("pwd2");
				var oage=$("age");
				var oemail=$("email");
				var ophone=$("phone");
				
				var os1=$('s1');
				var os2=$('s2');
				var os3=$('s3');
				var os4=$('s4');
				var os5=$('s5');
				var os6=$('s6');
				//定义正则表达式
				/*用户名:至少6位,以字母\下划线\$开头,后接数字*/
				var box_name=/^[a-zA-Z_$]\w{5}/;
				/*密码至少6位*/
				var box_pwd=/\w{6}/;
				/*年龄必须16~99岁
				 */
				var box_age=/^(1[6-9])|([2-9]\d)$/;
				/* 邮箱验证：
	   			   1)以至少3位字母或数字开头
   				   2)之后必须有一位@
   				   3)@后必须有1位是小写的字母或数字
   				   4)之后必须有一位.符号
   				   5).符号后面由3位小写字母组成
   				   6)之后可能又有.与2位小写字母结束*/
   				var box_email=/^\w{3,}@[a-z0-9]+\.[a-z]{3}(\.[a-z]{2})?$/;
   				  
   				  
   				  /*手机号:  以1开头，必须是11位数字。*/
   				 var box_phone=/^1\d{10}$/;
   				 //人性化提示
   				 oname.onblur=function(){
   				 //trim():去掉空格
   				if(box_name.test(oname.value.trim())){
   				 	afterCheck(this,"用户名输入正确","green",false);
   				 	nameFlag=true;
   				 }else{
   				 	afterCheck(this,"用户格式错误","red",true);
   				 }
   			}
   				
   				opwd1.onblur=function(){
   					 //trim():去掉空格
   				 if(box_pwd.test(opwd1.value.trim())){  
   				 	os2.innerHTML="密码输入正确";
   				 	os2.style.color="green";
   				}else{
   					os2.innerHTML="密码格式错误";
   				 	os2.style.color="red";
   				}
   			}
   				opwd2.onblur=function(){
   					 //trim():去掉空格
   				 if(opwd1.value.trim()==opwd2.value.trim()){  
   				 	os3.innerHTML="两次密码输入一致";
   				 	os3.style.color="green";
   				 	pwdFlag=true;
   				}else{
   					os3.innerHTML="两次密码输入不一致";
   				 	os3.style.color="red";
   				}
   			}
   				 
   				 oage.onblur=function(){
   				 		 //trim():去掉空格
   				 if(box_age.test(oage.value.trim())){  
   				 	os4.innerHTML="年龄输入正确";
   				 	os4.style.color="green";
   				 	ageFlag=true;
   				}else{
   					os4.innerHTML="年龄格式错误";
   				 	os4.style.color="red";
   				}
   			}
   				 
   				 oemail.onblur=function(){
   				 		 //trim():去掉空格
   				 if(box_email.test(oemail.value.trim())){  
   				 	os5.innerHTML="邮箱输入正确";
   				 	os5.style.color="green";
   				 	emailFlag=true;
   				}else{
   					os5.innerHTML="邮箱格式错误";
   				 	os5.style.color="red";
   				}
   			}
   				 
   				ophone.onblur=function(){
   				 		 //trim():去掉空格
   				 if(box_phone.test(ophone.value.trim())){  
   				 	os6.innerHTML="手机号输入正确";
   				 	os6.style.color="green";
   				 	phoneFlag=true;
   				}else{
   					os6.innerHTML="手机号格式错误";
   				 	os6.style.color="red";
   				}
   			}
   				return true;
   		}
   				 
   				 
		</script>
	</head>
	<body>
		<div id="box" >
			<h1>用户注册</h1>
			<!-- submit提交表单，对应的需要使用onsubmit事件       onsubmit一般都是在form标签上                
			会触发check()函数验证。         onsubmit需要接收check()函数的返回值 :true/false               
			 true: 表单会提交                false:表单不提交              还需要在check()函数前面写return                 
			 return true;        return false;   --> 
			<form action="http://www.baidu.com" onsubmit="return check();">
			
					<!--用户名-->
		<p>
			<label for="name">用户名：</label>
			<input type="text" id="name" />
			<span id="s1">请输入用户名</span>
		</p>
					<!--密码-->
		<p>
			<label for="pwd1">密码:</label>
			<input type="password" id="pwd1" />
			<span id="s2"></span>
		</p>
		<p>
			<label for="pwd2">确认密码:</label>
			<input type="password" id="pwd2" />
			<span id="s3">两次密码输入一致</span>
			
		</p>
		
		<p>
			<label>性别：</label>
					<!--男-->
			<input type="radio" id="sex_m" value="m" checked/>
			<label for="sex_m">男</label>
					<!--女-->
			<input type="radio" id="sex_g" value="g"/>
			<label for="sex_g">女</label>
		</p>
			
					<!--年龄-->
		<p>
			<label for="age">年龄：</label>
			<input type="text" id="age"/>
			<span id="s4">年龄必须在16-99之间</span>
		</p>
		
		<p>
			<label>爱好：</label>
					<!--游泳-->
			<input type="checkbox" id="hobby_swim" value="swim" />
			<label for="hobby_swim">游泳</label>
					<!--跳舞-->
			<input type="checkbox"  id="hobby_dance" value="dance" />
			<label for="hobby_dace">跳舞</label>
			
					<!--唱歌-->
			<input type="checkbox" id="hobby_sing" value="sing" />
			<label for="hobby_sing">唱歌</label>
		</p>
					<!--邮箱-->
		<p>
			<label for="email">邮箱：</label>
			<input  id="email" type="text"/>
			<span id="s5">邮箱必须符合要求</span>
		</p>
					<!--手机-->
		<p>
			<label for="phone">手机：</label>
			<input id="phone" type="text"/>
			<span id="s6">手机号必须是11为数字</span>
		
		</p>
					<!--表单提交-->
		<p><input type="submit"  value="提交" /></p>
		</div>
	</body>
</html>

怪我太贪心

关注

3
点赞
踩
39

收藏

觉得还不错? 一键收藏
0
评论
表单验证--用户注册页面

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box{ border: 3px solid red ; width: 600px; ...
复制链接

扫一扫