【HTML5】一个简单的用户注册布局示例代码
html5吧
全部回复
仅看楼主
level 7
johnny殇 楼主
<html>
<head>
<meta http-equiv="Content-Language" content="gb2312">
<title>一个简单的用户注册布局示例代码</title>
<style type="text/css">
td{
color:#00000;
}
input{
border:1px solid #666;
height:18px;
}
.regtr{
background:#E4D5CE;
}
.regTleft{
text-align:right;
}
.retMenu{
background:#CB7D58;
}
</style>
<script language="javascript" type="text/javascript">
function showadv()
{
if (document.form1.advshow.checked==true)
{
document.getElementById("adv").style.display="";
}
else
{
document.getElementById("adv").style.display="none";
}
}
var imgok ="<img src='img/ok.gif' align='absmiddle' hspace='2'>"
var imgwrong="<img src='img/wrong.gif' align='absmiddle' hspace='2'>"
function checkusername()
{
var username = document.form1.username.value;
var ts = document.getElementById("namets");
if(username.length < 2 || username.length >30)
{
ts.innerHTML =" " + imgwrong + "用户名长度不能少于1个字或大于15个字";
ts.style.color="#000000";
parent.document.form1.regsubmit.disabled=true;
}
else
{
ts.innerHTML =" " +imgok + "用户名可以使用!";
parent.document.form1.regsubmit.disabled=false;
}
}
function checkmima()
{
var mima = document.form1.mima.value;
var ts = document.getElementById("mimats");
if(mima.length < 6 )
{
ts.innerHTML =" " + imgwrong + "密码不能小于6位";
ts.style.color="#000000";
parent.document.form1.regsubmit.disabled=true;
}
else
{
ts.innerHTML =" " +imgok + "密码可以使用!";
parent.document.form1.regsubmit.disabled=false;
}
}
function checkyzmm()
{
var mima = document.form1.mima.value
var mima1 = document.form1.yzmm.value;
var ts = document.getElementById("yzts");
if(mima != mima1)
{
ts.innerHTML =" " + imgwrong + "两次密码不一致!";
ts.style.color="#000000";
parent.document.form1.regsubmit.disabled=true;
}
else if(mima1.length < 6)
{
ts.innerHTML =" " + imgwrong + "密码不能为空!";
ts.style.color="#000000";
parent.document.form1.regsubmit.disabled=true;
}
else
{
ts.innerHTML =" " +imgok + "密码验证通过!";
parent.document.form1.regsubmit.disabled=false;
}
}
function checkmail()
{
var mail = document.form1.youjian.value
var ts = document.getElementById("youjiants");
illegalemail = !(/^[\w\-\_\.u4e00-\u9fa5]+@[\w\-\_u4e00-\u9fa5]+(\.[\w\-\_u4e00-\u9fa5]+)+$/.test(mail));
if(illegalemail)
{
ts.innerHTML =" " + imgwrong + "邮件格式不对!";
ts.style.color="#000000";
parent.document.form1.regsubmit.disabled=true;
}
else
{
ts.innerHTML =" " +imgok + "您的邮件可以使用!";
parent.document.form1.regsubmit.disabled=false;
}
}
</script>
</head>
<body>
<form action="" method="post" name="form1">
<table width="1004" border="0" align="center" cellpadding="1" cel
lsp
acing="1" bgcolor="#ffffff" class="top">
<tr class="retMenu">
<td colspan="2">
注册 -- 必填内容
</td>
</tr>
<tr class="regtr1">
<td class="regTleft" width="30%">
用户名:
</td>
<td width="70%"><input type="text" name="username" onBlur="checkusername();"><span id="namets"> 用户名可以包括汉字,数字,字母,下划线</span>
</td>
</tr>
<tr class="regtr">
<td class="regTleft">
密码:
</td>
<td>
<input type="password" size="21" name="mima" onBlur="checkmima()"><span id="mimats"> 密码可以包括数字,字母,下划线</span>
</td>
</tr>
<tr class="regtr1">
<td class="regTleft">
确认密码:
</td>
<td>
<input type="password" size="21" name="yzmm" onBlur="checkyzmm()"><span id="yzts"> 重复输入你的密码</span>
</td>
</tr>
<tr class="regtr">
<td class="regTleft">
Email:
</td>
<td>
<input type="text" name="youjian" onBlur="checkmail()"><span id="youjiants"> 请正确输入的你的Email</span>
</td>
</tr>
<tr class="regtr1">
<td class="regTleft">
高级选项:
</td>
<td>
<input type="checkbox" name="advshow" onclick="showadv()">显示高级用户设置选项
</td>
</tr>
</table>
<div id="adv" style="display:none;">
<table width="1004" border="0" align="center" cellpadding="1" cellspacing="1" bgcolor="#ffffff" class="top">
<tr class="retMenu">
<td colspan="2">
注册 -- 选填内容
</td>
</tr>
<tr class="regtr1" width="30%">
<td class="regTleft">
安全提问:
</td>
<td width="70%">
<input type="text" name="wen">
</td>
</tr>
<tr class="regtr">
<td class="regTleft">
回答:
</td>
<td>
<input type="text" name="huida">
</td>
</tr>
<tr class="regtr1">
<td class="regTleft">
性别:
</td>
<td>
<input type="radio" value="1" name="xingbie">男
<input type="radio" value="2" name="xingbie">女
<input type="radio" value="0" name="xingbie" checked>保密
</td>
</tr>
<tr class="regtr">
<td class="regTleft">
地址:
</td>
<td>
<input type="text" name="laizi">
</td>
</tr>
<tr class="regtr1">
<td class="regTleft">
签名:
</td>
<td>
<textarea cols="30" rows="7"></textarea>
</td>
</tr>
</tr>
</table>
</div>
<table width="1004" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff" class="top">
<tr class="regtr">
<td width="30%">
</td>
<td width="70%">
<input type="submit" name="regsubmit" value=" 提 交 ">
</td>
</tr>
</table>
</form>
</body>
</html>
<br />
<a href="网址">******</a>
2015年05月10日 12点05分 1
1