效果如图所示：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin:0px;
padding: 0px;
font-family: "微软雅黑";
}
.box{
height: 400px;
500px;
position: relative;
margin: 50px 400px ;
background-color: ghostwhite;
}
.box-top{
height: 50px;
500px;
position: relative;
background-color: darkred;
text-align: center;
vertical-align: middle;
line-height: 50px;
font-size: 25px;
font-weight: bold;
color: white;
}
.box-1,.box-2,.box-3,.box-4,.box-5{
height: 40px;
500px;
position: relative;
margin-top: 10px;
}
.box-left-1,.box-left-2,.box-left-3,.box-left-4{
height: 40px;
150px;
float: left;
text-align: right;
vertical-align: middle;
line-height: 40px;
}
.box-mid-1,.box-mid-2,.box-mid-3,.box-mid-4{
height: 40px;
200px;
float: left;
text-align: center;
vertical-align: middle;
line-height: 40px;
}
#box-right-1,#box-right-2,#box-right-3{
height: 40px;
150px;
float: left;
text-align: left;
vertical-align: bottom;
line-height: 60px;
font-size: 13px;
color: red;
}
.input-a{
height: 30px;
180px;
position: relative;
background-color: transparent;
border-radius: 5px;
font-size: 13px;
}
.box-6{
height: 40px;
200px;
position: relative;
margin-top: 10px;
margin-left: 150px;
text-align: center;
vertical-align: middle;
line-height: 40px;
font-size: 20px;
font-weight: bold;
color: white;
background-color: brown;
}
.box-7{
height: 20px;
500px;
position: relative;
margin-top: 10px;
text-align: right;
vertical-align: middle;
line-height: 20px;
font-size:13px;
color: gray;
}
.box-7 span{
margin-right: 80px;
}
</style>
</head>
<body>
<div class="box">
<div class="box-top">
注 册
</div>
<div class="box-1">
<div class="box-left-1">登录账号：</div>
<div class="box-mid-1">
<form method="get" action="data.html">
<input type="text" placeholder="手机号/邮箱" id="text-1" class="input-a" onblur="less()"/>
</form>
</div>
<div id="box-right-1" ></div>
</div>
<div class="box-4" >
<div class="box-left-4">昵称：</div>
<div class="box-mid-4">
<form method="get" action="data.html">
<input type="text" placeholder="如：小鱼" class="input-a"/>
</form>
</div>
</div>
<div class="box-5">
<div class="box-left-4">性别：</div>
<div class="box-mid-4" style=" 250px;">
<form method="get" action="data.html">
<input type="radio" name="sex" id="sex-1" checked="checked" />女
<label for="sex-1"></label>
<input type="radio" name="sex" id="sex-2" />男
<label for="sex-2"></label>
<input type="radio" name="sex" id="sex-3" />不公开
<label for="sex-2"></label>
</form>
</div>
</div>
<div class="box-2">
<div class="box-left-2">输入密码：</div>
<div class="box-mid-2">
<form method="get" action="data.html">
<input type="password" placeholder="6-16个字符" id="text-2" class="input-a" onblur="haha()"/>
</form>
</div>
<div id="box-right-2" > </div>
</div>
<div class="box-3">
<div class="box-left-3">再次输入密码：</div>
<div class="box-mid-3">
<form method="get" action="data.html">
<input type="password" placeholder="6-16个字符" id="text-3" class="input-a" onblur="xixi()"/>
</form>
</div>
<div id="box-right-3" > </div>
</div>
<div class="box-6">注册</div>
<div class="box-7">
<span><a href="www" target="_blank">已有账号，马上登陆</a></span>
</div>
</div>
</body>
</html>
<script>
function less(){
var a=document.getElementById("text-1").value;
if(a==""){
document.getElementById("box-right-1").innerHTML="账号不能为空!";
}
else{
document.getElementById("box-right-1").innerHTML="";
}
}
function haha(){
var b=document.getElementById("text-2").value;
if(b==""){
document.getElementById("box-right-2").innerHTML="密码不能为空!";
}
else if((b.length>0)&&(b.length<6)){
document.getElementById("box-right-2").innerHTML="密码小于6个字符!";
}
else if(b.length>16){
document.getElementById("box-right-2").innerHTML="密码大于16个字符!";
}
else{
document.getElementById("box-right-2").innerHTML="";
}
}
function xixi(){
var b=document.getElementById("text-2").value;
var c=document.getElementById("text-3").value;
if(b!=c){
document.getElementById("box-right-3").innerHTML="两次输入密码不一致！";
}
else{
document.getElementById("box-right-3").innerHTML="";
}
}
</script>
缺点：缺少密码判断环节，用正则表达式写。keyup/addeventlistener.....是什么鬼，还得看啊！！！！！！