版权声明：斌哥版权，如有雷同，纯属虚构 https://blog.csdn.net/iostream992/article/details/83308523
声明：该代码还在更新中如有错误请见谅....
代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>用户注册页面</title>
<style>
#main ul{
list-style:none;
background-image:url(../111.jpg);
padding-top: 0;
}
#main li{
padding:5px;
}
body{
background-image:url(../111.jpg);
margin:0px; /*设置外边距*/
padding:0px; /*设置内边距*/
font-size:9pt; /*设置字体大小*/
}
header{
background-image: url(../111.gif);/*设置背景*/
height:168px;
}
section{
margin:0 auto auto auto; /*设置外边距*/
width:694px;
clear: both; /*两侧均不可以有浮动内容*/
background-color: #ffffff;
border:1px solid #407d2a; /*设置显示1像素的外边框*/
height:545px;
}
aside{
width:170px;
float:left; /*浮动在左侧*/
border-right:1px solid #407d2a; /*设置右侧显边框*/
padding-right: 5px;
}
#left{
float:right; /*浮动在左侧*/
}
#right{
float:right; /*浮动在右侧*/
}
#main{
float:left; /*浮动在左侧*/
}
</style>
<script language="javascript">
/*检验全部表单元素是否为空*/
function checkBlank(Form){
var v=ture;
for(i=0;i<Form.length;i++){
if(Form.elements[i].value==" "){
alter(Form.elements[i].title+"不能为空！");
Form.elements[i].focus();
v=false;
return false;
}
}
return v;
}
/*验证用户名是否合法*/
function checkuesrname(username){
var str=username;
var Expression=/^(\w){3,20}$/;
var objExp=new RegExp(Expression);
return objExp.test(str); /*通过正则表达式验证*/
}
/*验证密码是否合法*/
function checkPWD(PWD){
var str=PWD;
var Expression=/^[A-za-z]{1}([A-Za-Z0-9]|[._]){5,19}$/;
var objExp=new RegExp(Expression);
return objExp.test(str);
}
/*验证E-mail是否合法*/
function checkmail(email){
var str=email;
var Expression=/\w+([-+.']\w+)*@\w+([-.])\w+)*\.\w+([-.]\w+)*/;
var objExp=new RegExp(Expression);
return objExp.test(str);
}
function check(Form){
if(checkBlank(Form)){
if(checkusername(Form.username.value)){ /*验证用户名*/
if(checkPWD(Form.pwd.value)){ /*验证密码*/
if(Form.pwd.value==Form.repwd.value){ /*验证两次密码输入*/
if(checkmail(Form.email.value)){ /*验证邮箱*/
return ture;
}else{
alert("请输入正确E-mail地址！");
Form.email.focus();
return false;
}
}else{
alert("两次密码输入不一致，请重新输入！");
return false;
}
}else{
alert("您的密码输入不合法！");
Form.pwd.focus();
return false;
}
}else{
alert("您输入的用户名不合法！");
Form.username.focus();
return false;
}
}else
return false;
}
</script>
</head>
<body>
<section style="background-image: url(../112.gif)">
<header></header>
<div id="left"><img src="../112.png" width="0" height="0"></div>
<aside style="background-image: url(../111.jpg)"> <img src="../111.jpg" width="44" height="54">
<b>注册帮助</b>
<ul style="background-image: url(../112.png)" >
<li>
会员名：为会员登录网站的通行证，长度控制在3-20个字符之内。<br><br>
</li>
<li>
密码：请设置在6-20位之间。<br><br>
</li>
<li>
确定密码：确定密码必须与密码一致。<br><br>
</li>
<li>
Email：请输入有效的Email地址，以便于与您联系。
</li>
</ul>
</aside>
<div id="main">
<form name="form1" method="post" action="" onSubmit="return check(this)">
<ul>
<li>
用 户 名
<input type="text" name="username" id="username"
placeholder="长度控制3-20字符之间" autofocus size="23" title="用户名">
</li>
<li>
密 码
<input name="pwd" type="password" id="pwd"
placeholder="请设定在6-20位之间" size="23" title="密码">
</li>
<br>
<li>
确认密码：
<input type="password" name="repwd" id="repwd" size="23" title="确认密码" >
</li>
<li>
性 别
<input type="radio" name="sex" id="sex_0" form="form1" value="男" checked >
男
<input type="radio" name="sex" value="女" id="sex_1">
女
</li>
<li>
E-mail:
<input type="email" name="email" id="email" size="40" title="E-mail 地址">
</li>
<li>
<input type="submit" name="submit" id="submit" value="提交">
<input type="reset" name="reset" id="reset" value="重置">
</li>
</ul>
</form>
</div>
<div id="right"> <img src="../111.jpg" width="44" height="89"></div>
</section>
</body>
</html>
