JS学习之前端简单注册页面
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>登录</title>
<script type="text/javascript">
function MM_jumpMenu(targ,selObj,restore){ //v3.0
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}
</script>
</head>
<body>
<form name="form1" method="post" action="">
<div align="center">
<p> </p>
<p> </p>
<table width="47%" border="0">
<tr>
<td colspan="2"><div align="center">用户注册</div></td>
</tr>
<tr>
<td width="28%"><div align="right">用户名:</div></td>
<td width="72%"><div align="left">
<label for="1"></label>
<input type="text" name="1" id="1">
</div></td>
</tr>
<tr>
<td><div align="right">输入密码:</div></td>
<td><div align="left">
<label for="2"></label>
<input type="text" name="2" id="2">
</div></td>
</tr>
<tr>
<td><div align="right">再次输入密码:</div></td>
<td><div align="left">
<label for="3"></label>
<input type="text" name="3" id="3">
</div></td>
</tr>
<tr>
<td><div align="right">性别:</div></td>
<td><div align="left">
<label>
<input type="radio" name="4" value="男" id="4_0">
男</label>
<label>
<input type="radio" name="4" value="女" id="4_1">
女</label>
</div></td>
</tr>
<tr>
<td><div align="right">手机号:</div></td>
<td><div align="left">
<label for="5"></label>
<input type="text" name="5" id="5" οnkeyup="this.value=this.value.replace(/\D/g,'')"
onafterpaste="this.value=this.value.replace(/\D/g,'')">
</div></td>
</tr>
<tr>
<td><div align="right">兴趣爱好:</div></td>
<td><div align="left">
<label>
<input type="checkbox" name="6" value="游泳" id="6_0">
游泳</label>
<label>
<input type="checkbox" name="6" value="天文" id="6_1">
天文</label>
<label>
<input type="checkbox" name="6" value="IT" id="6_2">
IT</label>
<label>
<input type="checkbox" name="6" value="美术" id="6_3">
美术</label>
<label>
<input type="checkbox" name="6" value="音乐" id="6_4">
音乐</label>
</div></td>
</tr>
<tr>
<td><div align="right">籍贯:</div></td>
<td><div align="left">
<label for="7"></label>
<select name="7" id="7">
<option>北京</option>
<option>山东</option>
<option>上海</option>
<option>河北</option>
<option>西安</option>
</select>
</div></td>
</tr>
<tr>
<td><div align="right">个人简介:</div></td>
<td><div align="left">
<label for="8"></label>
<textarea name="8" id="8"></textarea>
</div></td>
</tr>
<tr>
<td><div align="right">
<input type="button" name="zhuce" id="zhuce" value="注册" οnclick="xianshi()">
</div></td>
<td><div align="left">
<input type="reset" name="cc" id="cc" value="重置">
</div></td>
</tr>
</table>
</div>
</form>
<script type="text/javascript">
function xianshi(){
var yonghu=document.getElementById("1").value;
var mima1=document.getElementById("2").value;
var mima2=document.getElementById("3").value;
var xingbie=document.getElementsByName("4");
var shoujihao=document.getElementById("5").value;
var xingqu=document.getElementsByName("6");
var jiguan = document.getElementById("7");
var Sindex= jiguan.selectedIndex;
var Sjiguan= jiguan.options[Sindex].text;
var jianjie=document.getElementById("8").value;
var re = /^\d+(?=\.{0,1}\d+$|$)/;
while(1&&flag!=0){
var flag = 0;
var Sxingbie="";
var Sxingqu="";
if(yonghu!=""&&mima1!=""&&mima2!=""&&shoujihao!=""){
if(yonghu.length<4||yonghu.length>10){
alert("用户名错误,请重新输入!");
document.getElementById("1").value="";
document.getElementById("1").focus();
flag++;
break;
}
if(mima1.length<6||mima1.length>16){
alert("密码长度太短!请重新输入!");
flag++;
break;
}
if(mima1!=mima2){
alert("两次密码不同!请重新输入!");
flag++;
break;
}
if(shoujihao.length!=11){
alert("手机号不正确,请重新输入!");
document.getElementById("5").value="";
document.getElementById("5").focus();
flag++;
break;
}
if(!re.test(shoujihao)){
alert("输入不是数字,请重新输入!");
document.getElementById("5").value="";
document.getElementById("5").focus();
flag++;
break;
}
for(var i = 0; i<xingbie.length; i++){
if(xingbie[i].checked==true){
Sxingbie+= xingbie[i].value.toString();
}
}
var j=0;
for(var i = 0; i<xingqu.length; i++){
if(xingqu[i].checked==true){
if(j==0){
Sxingqu+=xingqu[i].value.toString();
j=1;
}else{
Sxingqu+= (" , "+xingqu[i].value.toString());
}
}
}
if(flag==0){
break;
}
}else{
if(yonghu==""||mima1==""||mima2==""||shoujihao=="")
{
alert("请填写完整信息!");
flag=1;
break;
}
}
}
if(flag==0){
alert("所有信息正确!");
alert("请核对您的信息\n"+"用户名:"+yonghu+"\n密码:"+mima1+"\n性别:"+Sxingbie+"\n手机号:"+shoujihao+"\n兴趣爱好:"+Sxingqu+"\n籍贯:"+Sjiguan+"\n个人简介:"+jianjie);
window.setTimeout("window.open('b.html')",1500);
}else{
alert("请检查您的信息,重新输入!");
}
}
</script>
</body>
</html>
b.html页面内容
<html>
<head>
<meta charset="utf-8">
<title>登陆成功页面</title>
</head>
<body>
<h1>登陆成功!!</h1>
</body>
</html>