注册界面

最新推荐文章于 2021-04-20 15:03:48 发布

Carl·杰尼龟

最新推荐文章于 2021-04-20 15:03:48 发布

阅读量231

点赞数

分类专栏：前端

未经作者允许，不可私自转载/抄袭

本文链接：https://blog.csdn.net/qq_39052339/article/details/102966399

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body{
				 background:url(../img/作业4图片/register_bg.png)  no-repeat center;
				 padding-top:25px;
			}
			.design{
				height: 500px;
				width: 900px;
				border: 8px solid #EEEEEE;
				background-color: white;
				margin: auto;
			}
			.design-center{
				float: left;
			}
			.design-left{
				float: left;
				margin: 15px;
			}
			.design-right{
				float: right;
				margin: 15px;
			}
			.table-center{
				padding-top:5px ;
				margin: auto;
			}
			.td-css{
				padding-left:50px ;
			}
			.img-css{
				height: 32px;
				vertical-align: middle;
			}
			.sub-css{
				background-color: orange;
				height: 40px; 
				width: 150px; 
				vertical-align: inherit;
				border: 0px;
			}
			.data-css{
				width: 161.22px; 
				height: 17.53px;
			}
			#username,#password,#email,#user,#telphone,#brithday,#yanzheng{
				width: 251px;
				height: 32px;
				border: 1px solid #A6A6A6;
				border-radius: 10px;
				padding-left: 10px;;
			}
		</style>
		<script>
			window.onload=function(){
				document.getElementById("form").onsubmit=function(){
					if(checkusername()&&checkpassword()&&checkemail()&&checkuser()){
						return true;
					}
					return false;
				}
				document.getElementById("username").onblur=checkusername;
				document.getElementById("password").onblur=checkpassword;
				document.getElementById("email").onblur=checkemail;
				document.getElementById("user").onblur=checkuser;
			}
			function checkusername(){
				var username=document.getElementById("username").value;
				var reg=/^\w{6,12}$/;
				var flag=reg.test(username);
				var errorusername=document.getElementById("errorusername");
				if(flag){
					errorusername.innerHTML="<img height='25px' width='35px' src='../img/作业4图片/gou.png'/>"
				}else{
					errorusername.innerHTML="用户名格式有误";
				}
				return flag;
			}
			function checkpassword(){
				var password=document.getElementById("password").value;
				var reg1=/^[a-z-A-Z]\w{5,17}$/;
				var flag1=reg1.test(password);
				var errorpassword=document.getElementById("errorpassword");
				if(flag1){
					errorpassword.innerHTML="<img height='25px' width='35px' src='../img/作业4图片/gou.png'/>"
				}else{
					errorpassword.innerHTML="密码有误";
				}
				return flag1;
			}
			function checkemail(){
				var email=document.getElementById("email").value;
				var reg2=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
				var flag2=reg2.test(email);
				var erroremail=document.getElementById("erroremail");
				if(flag2){
					erroremail.innerHTML="<img height='25px' width='35px' src='../img/作业4图片/gou.png'/>"
				}else{
					erroremail.innerHTML="邮箱格式有误";
				}
				return flag2;
			}
			function checkuser(){
				var user=document.getElementById("user").value;
				var reg3=/^[\u4e00-\u9fa5]{1,5}$/;
				var flag3=reg3.test(user);
				var erroruser=document.getElementById("erroruser");
				if(flag3){
					erroruser.innerHTML="<img height='25px' width='35px' src='../img/作业4图片/gou.png'/>"
				}else{
					erroruser.innerHTML="姓名格式有误";
				}
				return flag3;
			}
		</script>
	</head>
	<body>
			<div class="design">
				<div class="design-left">
					<p>
						<font style="color: yellow; font-size: 20px;">
							新用户注册
						</font>
					</p>
					<p>
						<font style="color: #A6A6A6; font-size: 20px;">
							用户注册
						</font>
					</p>
				</div>
				<div class="design-right">
					<font>
						现有账户
						<a  href="作业4-注册界面.html">立即登录</a>
					</font>
				</div>
				<div class="design-center">
					<form action="#" id="form" method="get">
				<table class="table-center" border="0px" cellspacing="0px" cellpadding="10px">
					<tr>
						<td>用户名</td>
						<td>
							<input type="text" name="username" id="username" placeholder="请输入用户名"/>
							<span id="errorusername" style="color: red;"></span>
						</td>
					</tr>
					<tr>
						<td>密码</td>
						<td>
							<input type="password" align="center"  id="password" placeholder="请输入密码"/>
							<span id="errorpassword" style="color: red;"></span>
						</td>
					</tr>
					<tr>
						<td>电子邮箱</td>
						<td>
							<input type="email" name="email" id="email" placeholder="请输入邮箱"/>
							<span id="erroremail" style="color: red;"></span>
						</td>
					</tr>
					<tr>
						<td>姓名</td>
						<td>
							<input type="text" name="user"  id="user" placeholder="请输入姓名"/>
							<span id="erroruser" style="color: red;"></span>
						</td>
					</tr>
					<tr>
						<td>手机号</td>
						<td>
							<input type="tel" name="telphone"  id="telphone" placeholder="请输入电话号码"/>
						</td>
					</tr>
					<tr>
						<td>性别</td>
						<td>
							<input type="radio" name="sex"  id="sex"/>男
							<input type="radio" name="sex"  id="sex"/>女
						</td>
					</tr>
					<tr>
						<td>出生日期</td>
						<td>
							<input class="data-css" type="date" name="brithday"  id="brithday" />
						</td>
					</tr>
					<tr>
						<td>验证码</td>
						<td>
							<input type="text" name="yanzheng"  id="yanzheng" />
							<img class="img-css" src="../img/verify_code.jpg" />
						</td>
					</tr>
					<tr>
						<td colspan="3" align="center">
							<input class="sub-css" type="submit" name="login"  id="login" value="注册"/>
						</td>
					</tr>
				</table>
				</form>
		</div>
		</div>
	</body>
</html>

Carl·杰尼龟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
注册界面

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> body{ background:url(../img/作业4图片/register_bg.png) no-repeat cent...
复制链接

扫一扫