HTML:
<html>
<head>
<title>用户注册</title>
<link type="text/css" rel="stylesheet" href="Untitled-2.css">
<style type="text/css">
.former{
position: absolute;/*绝对定位*/
width: 500px;
height: 150px;
border: 1px solid ;
text-align: center;/*(让div中的内容居中)*/
top: 50%;
left: 50%;
margin-top: -250px;
margin-left: -250px;
}
</style>
<script type="text/javascript" src="js/11-5.js"></script>
</head>
<body>
<div>
<p class="center">免费注册成eBook会员</p >
</div>
<form action="" method="post">
<div class="former">
<div class="row">
<span class="name">会员账号:</span><span class="value"><input type="text" name="name"/>(请输入数字,字母,下划线组合,长度为10字节)
</span><p class="msg"><i class="ati"></i>长度为10</p>
</div>
<div class="row">
<span class="name">密码:</span><span class="value"><input type="password" class="text" name="pwd1"/>(请务必牢记此密码!)
</span><p class="msg"><i class="err"></i>密码不能为空</p>
</div>
<div class="row">
<span class="name">确认密码:</span><span class="value"><input type="password" class="text" name="pwd2"/>
</span>
</div>
<div class="row">
<span class="name">E_mail:</span><span class="value"><input type="email" name="email"/>
</span><p class="msg"><i class="ati"></i>邮箱地址必为合法地址</p>
</div>
</div>
</form>
<p></p><br>
<br><br><br><br><br><br><br><br><br><br>
<div id="law" align=center>
<textarea rows="10" cols="60" >
eBook会员条款 首先,您必须完全同意一、服务条款的确认和接纳
1、移步客(以下简称“本站”)各项服务的所有权和运作权归北京文言时代电子商务有限公司。本站提供的服务将完全按照其发布的章程、服务条款和操作规则严格执行。会员应完全同意所有服务条款并完成注册程序,才能成为本站的正式注册会员,享受本站提供的更全面的服务。
</textarea>
<p>请阅读并同意会员条款<input name="agree" type="radio" checked />点选这里表明你已经阅读并同意</p >
<p>
<button type="botton">提交</button>
<input type="button" value="重填" />
</p >
</div>
</body>
</html>
JS
function getLength(str){
return str.replace(/[^\x-xff]/g,"xx").length;
}
window.onload=function(){
var alnput=document.getElementsByTagName('input');
var oName=alnput[0];
var pwd1=alnput[1];
var pwd2=alnput[2];
var email=alnput[3];
var aP=document.getElementByTagName('p');
var name_msg=aP[0];
var pwd1_msg=aP[1];
var email_msg=aP[2];
var name_length=0;
oName.onblur=function(){
if(this.value==""){
name_msg.innerHTML='<i class="err"></i>不能为空!'
}
else if(name_length!=10){
name_msg.innerHTML='<i class="err"></i>长度必为10!'
}
else{
name_msg.innerHTML='<i class="ok"></i>OK!'
}
}
pwd1.onblur=function(){
if(this.value==""){
pwd1_msg.innerHTML='<i class="err"></i>不能为空!'
}
else{
pwd1_msg.innerHTML='<i class="ok"></i>OK!'
}
}
pwd2.onblur=function(){
if(this.value!=pwd1.value){
pwd2_msg.innerHTML='<i class="err"></i>两次输入密码不一致!'
else{
pwd2_msg.innerHTML='<i class="ok"></i>OK!'
}
}
email.onblur=function(){
var re=/[@.\w]/g;
if(re.test(this.value)){
email_msg.innerHTML='<i class="err"></i>不包含@和.'
else{
email_msg.innerHTML='<i class="ok"></i>OK!'
}
}
}
CSS:
@charset "utf-8";
/* CSS Document */
form{
text-align:center;
}
div p.center{
text-align:center;
}
div.former{
display:table;
background-color:#0CC;
border-spacing:2px;
padding:10px;
align:center;
}
#f{
alignment-baseline:central;}
div.row{
display:table-row;
}
span.name{
display:table-cell;
text-align:center;
}
span.value{
display:table-cell;
text-align:left;
}
码农2号
qq_容定行_0