JS学习之前端简单注册页面

来源：互联网发布：三星数据恢复软件大师编辑：程序博客网时间：2024/05/17 08:44

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" onkeyup="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="注册" onclick="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>

阅读全文

0 0