Web实现：会员注册页面HTML、CSS、JS

冷寒箐_erizo
888 阅读2分钟

HTML部分：

<!DOCTYPE html>
<html>
<head>
	<title>会员注册</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="regist.css">
</head>
<body>
	<form action="" method="post" id="register">
		<div class="head">
			<label>用户信息注册</label>
		</div>
		<div>
			<div>
				<label class="title">用&nbsp;&nbsp;户&nbsp;&nbsp;名</label>
			</div>
			<div>
				<input type="text" name="username" placeholder="请输入用户名" class="i-input" onblur="usernameBlur()" id="username">
			</div>		
			<div style="position: relative; top: -50px;left: 380px;width: 395px;" id="usernameMark"></div>
		</div>
		<div>
			<div>
				<label class="title">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码</label>
			</div>
			<div>
				<input type="password" name="pwd" placeholder="请输入密码" class="i-input" id="pwd" onblur="pwdBlur()">	
			</div>	
			<div style="position: relative; top: -50px;left: 380px;"id="pwdMark"></div>			
		</div>
		<div>
			<div>
				<label class="title">确认密码</label>
			</div>
			<div>
				<input type="password" name="pwd2" placeholder="请再次输入密码" class="i-input" id="pwd2" onblur="pwd2Blur()">
			</div>	
			<div style="position: relative; top: -50px;left: 380px;" id="pwd2Mark"></div>	
		</div>
		<div>
			<div>
				<label class="title">性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别</label>
			</div>
			<div>				
				<input type="radio" name="gender" value="0" id="male">
				<label for="male" form="register">男</label>				
				<input type="radio" name="gender" value="1" id="female">
				<label for="female" form="register">女</label>
			</div>																
		</div>
		<div>
			<div>
				<label class="title">出生日期</label>
			</div>
			<div>
				<input type="text" name="year" placeholder="年" class="date" id="year" onblur="dateBlur()">
				<label>年</label>
				<input type="text" name="month" placeholder="月" class="date" id="month" onblur="dateBlur()">
				<label>月</label>
				<input type="text" name="day" placeholder="日" class="date" id="day" onblur="dateBlur()">
				<label>日</label>					
			</div>		
			<div style="position: relative; top: -50px;left: 380px;" id="dateMark"></div>
		</div>
		<div>
			<div>
				<label class="title">电子邮箱</label>
			</div>
			<div>
				<input type="text" name="mail" placeholder="请输入邮箱" class="i-input" id="mail" onblur="mailBlur()">
			</div>
			<div style="position: relative; top: -50px;left: 380px;" id="mailMark"></div>
		</div>		
		<div>
			<input type="checkbox" name="agree" id="checkbox" onclick="check()">
			<label class="agreement">
				我同意遵守<a href="" target="_blank">会员协议</a>
			</label>
		</div>
		<div>
			<input type="submit" name="regist" value="注册" id="registbtn" disabled="disabled" onclick="check()">
			<input type="reset" name="reset" value="清除">			
		</div>
	</form>	
	<script src="regist.js"></script>
</body>
</html>

CSS部分：

@charset "UTF-8";

*{
	padding: 0px;
	margin: 0px;
}

body{
	background-image: linear-gradient(to bottom right, blue,#c9dded,#ededed);
	background-position: center;
	background-attachment: fixed;
}

form{
	width: 380px;
	height: 450px;
	margin: 90px auto;
	border-radius: 15px;
	background-color: rgba(255,255,255,0.7);
}

form>div{
	width: 380px;
	height: 50px;
	line-height: 50px;
}

form div div{
	height: 50px;
	line-height: 50px;
}

form div div:nth-child(1){
	width: 145px;
	float: left;
}

form div div:nth-child(2){
	width: 235px;
	float: left;
    padding-left: 10px;
    box-sizing: border-box;
}

.head{
	font-size: 20px;
	text-align: center;
}

form div div:nth-child(1) label{
	padding-left: 40px;
}

.i-input{
	width: 175px;
	height: 24px;
}

#female{
	margin-left: 50px;
}

.date{
	width: 30px;
}

form div:nth-child(8){
	text-align: center;
}

a{
	color: red;
}

form div:nth-child(9){
	text-align: center;
}

form div:nth-child(9) input{
	width: 135px;
	margin: 10px;
}

JS部分：

/*
*用户名不能为空,首个字符必须是字母，其后可以是字母数字下划线
*密码和确认密码不能为空，密码长度不能小于6位，最多10位，只能是字母和数字，密码和确认密码必须相同
*出生日期必须是数字，月范围1-12，日范围1-31
*电子邮件地址不能为空，必须包含符号“@”和“.”
*必须选中“我同意遵守会员协议”后，注册按钮才可以使用
*/

function check(){
	if(document.getElementById("checkbox").checked==true){
		document.getElementById("registbtn").disabled="";
	}else{
		document.getElementById("registbtn").disabled="disabled";
	}
}

function usernameBlur(){
	var username=document.getElementById("username");
	var usernameMark=document.getElementById("usernameMark");
	var reg=/^[a-zA-Z][a-zA-Z0-9_]{1,18}$/;
	if(username.value==""){
		usernameMark.innerHTML="用户名不能为空，字母数字下划线组成，首字符为字母";
		return false;
	}
	if(reg.test(username.value)==false){
		usernameMark.innerHTML="用户名不能为空，字母数字下划线组成，首字符为字母";
		return false;
	}
	usernameMark.innerHTML="";
	return true;
}

function pwdBlur(){
	var pwd=document.getElementById("pwd");
	var pwdMark=document.getElementById("pwdMark");
	var reg=/^[a-zA-Z0-9]{6,10}$/;
	if(pwd.value==""){
		pwdMark.innerHTML="密码不能为空，6到10位字母数字组成";
		return false;
	}
	if(reg.test(pwd.value)==false){
		pwdMark.innerHTML="密码不能为空，6到10位字母数字组成";
		return false;
	}
	pwdMark.innerHTML="";
	return true;
}

function pwd2Blur(){
	var pwd2=document.getElementById("pwd2");
	var pwd2Mark=document.getElementById("pwd2Mark");
	var reg=/^[a-zA-Z0-9]{6,10}$/;
	if(pwd2.value==""){
		pwd2Mark.innerHTML="不能为空，必须与密码相同";
		return false;
	}
	if(reg.test(pwd2.value)==false){
		pwd2Mark.innerHTML="不能为空，必须与密码相同";
		return false;
	}
	pwd2Mark.innerHTML="";
	return true;
}

function dateBlur(){
	var year=document.getElementById("year");
	var month=document.getElementById("month");
	var day=document.getElementById("day");
	var reg1=/^[0-9]{4}$/;
	var reg2=/^[0-9]{1,2}$/;
	var reg3=/^[0-9]{1,2}$/;
	if(year.value==""||month.value==""||day.value==""){
		dateMark.innerHTML="不能为空，必须是数字，月范围1-12，日范围1-31";
		return false;
	}
	if(!reg1.test(year.value)){
		dateMark.innerHTML="请检查输入的年份是否有误";
		return false;
	}
	if(!reg2.test(month.value)){
		dateMark.innerHTML="请检查输入的月份是否有误";
		return false;
	}
	if(!reg3.test(day.value)){
		dateMark.innerHTML="请检查输入的日期是否有误";
		return false;
	}
	if(year.value<1930||year.value>2020){
		dateMark.innerHTML="请检查输入的年份是否有误";
		return false;
	}
	if(month.value>12||month.value<1){
		dateMark.innerHTML="请检查输入的月份是否有误";
		return false;
	}
	if(day.value>31||day.value<1){
		dateMark.innerHTML="请检查输入的日期是否有误";
		return false;
	}
	if(month.value==4||month.value==6||month.value==9||month.value==11){
		if(day.value>30){
			dateMark.innerHTML="请检查输入的日期是否有误";
			return false;
		}
	}
	if(month.value==2){
		if((year.value%4==0&&year.value%100!=0)||(year.value%400==0)){
			if(day.value>29){
				dateMark.innerHTML="请检查输入的日期是否有误";
				return false;
			}
		}else{
			if(day.value>28){
				dateMark.innerHTML="请检查输入的日期是否有误";
				return false;
			}
		}

//		if(year.value%4==0&&day.value>29){
//			dateMark.innerHTML="请检查输入的日期是否有误";闰年2月29日判断有错
//			return false;
//			
//		}
	}

	dateMark.innerHTML="";
	return true;
}

function mailBlur(){
	var mail=document.getElementById("mail");
	var mailMark=document.getElementById("mailMark");
	var reg=/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
	if(mail.value==""||!reg.test(mail.value)){
		mailMark.innerHTML="邮箱不能为空，且符合邮箱标准形式"
		return false;
	}
	mailMark.innerHTML="";
	return true;
}
avatar
文章
阅读
粉丝