页面代码
<body>
<form action="" οnsubmit="return validateForm();" method="post">
<div class="top"><div class="wz">注册新会员</div></div>
<div class="dlk"><div class="dlk1">
<div class="wz1">用户名</div>
<div class="dl"><input type="text" name="user" id="user" style="width:200px;" height="15px;"><a style="color:#F00; margin-left:5px;">*</a></div></div>
<div class="dlk1">
<div class="wz1">密码</div>
<div class="dl"><input type="password" name="pws" id="pws" style="width:200px;" height="15px;"><a style="color:#F00; margin-left:5px;">* </a></div>
</div>
<div class="dlk1">
<div class="wz1">确认密码</div>
<div class="dl"><input type="password" name="pws1" id="pws1" style="width:200px;" height="15px;"><a style="color:#F00; margin-left:5px;">* </a></div>
</div>
<div class="dlk1">
<div class="wz1">Email</div>
<div class="dl"><input type="text" name="Email" id="Email" style="width:200px;" height="15px;"><a style="color:#F00; margin-left:5px;">*</a></div></div>
<div class="dlk1">
<div class="wz1">QQ</div>
<div class="dl"><input type="text" name="QQ" id="QQ" style="width:200px;" height="15px;"><a style="color:#F00; margin-left:5px;">*</a>
</div>
</div>
<div class="dlk1">
<div class="wz1">手机号码</div>
<div class="dl"><input type="text" name="phone" id="phone" style="width:200px;" height="15px;"><a style="color:#F00; margin-left:5px;">*</a></div>
</div>
<div class="dlk1">
<div class="wz1"></div>
<div class="dl"><input type="submit" value="确认注册" /></div>
</div>
</div>
</div></form>
</body>
css部分代码
body {
margin-left: auto;
margin-right: auto;
margin-top: 0px;
margin-bottom: 0px;
}
.top {
height:30px;
width:100%;
background-color:#F00;
}
.wz{
color:#FFF;
font-weight:bold;
font-size:13px;
margin-top:7px;
float:left;
}
.dlk{
margin: 0 auto;
width: 350px;
height: 600px;
margin-top:30px;
}
.dlk1{
margin-top:5px;
height:35px;
width:350px;
float:left;
display:block;
clear:both;
font-size:13px;
}
.dl{
width:250px;
height:30px;
margin-left:10px;
font-size:12px;
float:left;
}
.wz1{
width:80px;
height:30px;
float:left;
display: inline;
font-size:13px;
text-align:right;
}
a{
text-decoration:none;
font-size:12px;
color:#288bc4;
}
a:hover{
text-decoration:underline;
}
js代码
<script type="text/javascript">
function validateForm()
{
flag=true;
var user=document.getElementById("user").value;
var pws=document.getElementById("pws").value;
var pws1=document.getElementById("pws1").value;
var Email=document.getElementById("Email").value;
var QQ=document.getElementById("QQ").value;
var phone=document.getElementById("phone").value;
if(user=="")
{
flag=false;
alert("用户名不能为空");
}
else if(user.length<6){
flag=false;
alert("用户名长度不能小于6");
}
if(pws==""||pws1=="")
{
flag=false;
alert("密码不能为空");
}
else if(pws.length<6||pws1.length<6)
{
flag=false;
alert("密码长度不能小于6");
}
else if(pws!=pws1)
{
flag=false;
alert("两次输入的密码不一致");
}
if(Email=="")
{
flag=false;
alert("邮箱不能为空");
}
if(QQ=="")
{
flag=false;
alert("QQ不能为空");
}
if(phone=="")
{
flag=false;
alert("手机号不能为空");
}
}
</script>