效果图
背景图片需要自己添加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册</title>
<script type="text/javascript">
function checkEmail(node){
var email = /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/i;
if(email.test(node.value))
{
node.style.color="#28ff28";
}
else
{
node.value="";
}
}
function checkUser(node)
{
var name = /^(?!_)(?!.*?_$)[a-zA-Z0-9_\u4e00-\u9fa5]{1,5}$/i;
if(name.test(node.value))
{
node.style.color="#28ff28";
}
else
{
node.value="";
}
}
function checkPsw(node)
{
var psw = /^(?!_)(?!.*?_$)[\w]{6,16}$/i;
if(psw.test(node.value))
{
node.style.color="#28ff28";
}
else
{
node.value="";
}
}
function rcheckPsw(node)
{
var psw = document.getElementById("password1").value;
if (psw=="")
{
node.value="";
return ;
}
if(node.value==psw)
{
node.style.color="#28ff28";
}
else
{
node.value="";
}
}
function register()
{
if (document.getElementById("email").value == "") { alert("请填写邮箱！"); return; }
if (document.getElementById("username").value == "") { alert("请填写用户名！"); return; }
if (document.getElementById("password1").value == "") { alert("请填写密码！"); return; }
if (document.getElementById("password2").value == "") { alert("请确认密码！"); return; }
localStorage.setItem("email",document.getElementById("email").value);
localStorage.setItem("username",document.getElementById("username").value);
var item = null;
var obj = document.getElementsByName("sex")
for (var i = 0; i < obj.length; i++) {
if (obj[i].checked) {
item = obj[i].value;
}
}
localStorage.setItem("sex",item);
localStorage.setItem("password",document.getElementById("password1").value);
alert("已成功提交您的注册信息！");
window.location.href="登录.html";
}
</script>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family:宋体;
background-image: url("../../images/10087.jpg");
background-size: cover;
}
#bigbox{
margin: auto;
margin-top: 20px;
width: 900px;
height: 600px;
}
#bigbox_left {
/*设置整体的尺寸、背景色、边距等*/
width: 600px;
height: 600px;
border: 8px solid #eeeeee;
float: left;
background: rgba(0, 0, 0,0.6);
}
#bigbox_right {
/*设置整体的尺寸、背景色、边距等*/
width: 300px;
height: 600px;
border: 8px solid #eeeeee;
background: white;
float: right;
background-image: url("../../images/10088.jpg");
}
#left {
/*设置左浮动和外边距*/
float: left;
margin: 10px;
}
#left > p:first-child {
/*设置段落（新用户注册）颜色和字体大小*/
color: gray;
font-size: 20px;
}
#left > p:last-child {
/*设置段落（USER REGISTER）颜色和字体大小*/
color: #A6A6A6;
font-size: 20px;
}
#center {
/*设置中间的各种输入框等*/
margin:0 auto;
float: right;
width: 600px;
}
#right {
/*设置右边段落浮动和外间距*/
float: right;
margin-top:500px;
margin-right:30px;
}
#right > p:first-child {
font-size: 15px;
}
#right p a {
/*设置超链接（立即登录）颜色*/
color: crimson;
text-decoration:none;
}
.td_head {
/*设置表单中字体对齐方式和宽度、高度*/
color:#fff;
width: 100px;
height: 30px;
}
.input{
/*设置输入框大小和边框*/
width: 250px;
height: 30px;
margin-bottom: 5px;
border: none;
border-bottom: 1px solid white;
outline: none;
text-align: center;
color:#fff;
background: rgba(0, 0, 0,0);
}
.input::-webkit-input-placeholder{
color: #a0a0a0;
font-size: 10px;
}
.input1{
/*设置输入框大小和边框*/
display: none;
width: 250px;
height: 30px;
margin-bottom: 5px;
border: none;
border-bottom: 1px solid white;
outline: none;
text-align: center;
color:#fff;
background: rgba(0, 0, 0,0);
}
#but_code{
width: 100px;
height: 30px;
border: 1px solid #A4A4A4;
/* 设置边框为圆角 */
border-radius: 8px;
}
#zhuce{
margin: 0 auto;
text-align: center;
}
#btn_sub{
/*注册按钮*/
margin-top:20px;
background: orangered;
color: whitesmoke;
width: 150px;
height: 40px;
border: 1px solid gray ;
border-radius: 30px;
}
table{
margin:0 auto;
text-align: center;
}
.btn{
width: 80px;
height:30px;
margin-top: 30px;
text-transform: uppercase;
border: 2px solid #fcfcfc;
color:#fcfcfc;
text-align: center;
border-radius: 30px;
background: rgba(0, 0, 0,0);
cursor: pointer;
transition: .2s;
}
#bigbox_right .div1{
margin: 0 auto;
text-align: center;
padding-top: 20px;
color:#fcfcfc;
font-size: 30px;
}
#bigbox_right .div2{
margin: 0 auto;
text-align: center;
padding-top: 20px;
color:#fcfcfc;
font-size: 15px;
}
#bigbox_right .div3{
margin: 0 auto;
text-align: center;
padding-top: 150px;
color:#fcfcfc;
font-size: 30px;
}
.fileinput {
width: 102px;
height: 34px;
opacity: 0;
padding: 0;
margin: 0;
}
.filefont {
width: 150px;
height: 34px;
margin:0 auto;
margin-top: -36px;
display: block;
line-height: 34px;
border: 1px solid white;
border-radius: 20px;
color: #fff;
}
</style>
</head>
<body>
<!--表单内容-->
<div id="bigbox">
<div id="bigbox_left">
<div id="left">
<p>新用户注册</p>
<p>USER REGISTER</p>
</div>
<div id="center">
<div class="form">
<form action="http://www.baidu.com/" method="post" onsubmit="return false" autocomplete="off">
<table>
<tr>
<td class="td_head"><label>邮箱</label></td>
</tr>
<tr>
<td>
<input type="text" class="input" name="email " id="email" onblur="checkEmail(this)">
</td>
</tr>
<tr>
<td class="td_head"><label>用户名</label></td>
</tr>
<tr>
<td>
<input type="text" class="input" name="username" placeholder="用户名长度不超过5位" id="username" onblur="checkUser(this)">
</td>
</tr>
<tr>
<td class="td_head"><label>性别</label></td>
</tr>
<tr>
<td>
<input type="radio" checked="checked" name="sex" value="男"><span style="color: white;">男</span>
<input type="radio" name="sex" value="女"><span style="color: white;">女</span>
</td>
</tr>
<tr>
<td class="td_head"><label>头像</label></td>
</tr>
<tr>
<td>
<input type="file" name="" id="" class="fileinput">
<div class="filefont">点击上传头像</div>
</td>
</tr>
<tr>
<td class="td_head"><label>设置密码</label></td>
</tr>
<tr>
<td>
<input type="password" class="input" name="password1" placeholder="密码长度至少为6位且为字母与数字的组合" id="password1" onblur="checkPsw(this)">
</td>
</tr>
<tr>
<td class="td_head"><label>确认密码</label></td>
</tr>
<tr>
<td>
<input type="password" class="input" name="password2" placeholder="两次密码输入须一致" id="password2" onblur="rcheckPsw(this)">
</td>
</tr>
</table>
</form>
</div>
<div id="zhuce">
<button id="btn_sub" onclick="register()">注册</button>
</div>
</div>
</div>
<div id="bigbox_right">
<div class="div1">已有账号?</div>
<div class="div2">有账号就登录吧，好久不见了！</div>
<div class="div3"><button class="btn" OnClick="javascript:window.location.href='登录.html'">登录</button></div>
</div>
</div>
</body>
</html>
版权声明：本文为weixin_58821483原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。