1. 程式人生 > >html+JavaScript登陸註冊介面

html+JavaScript登陸註冊介面

最近剛剛學習了一些關於JavaScript的知識,便在之前學習的html前端的基礎上

做了一些簡單的修改,本身還存在著很多的缺陷,希望大家多多指正。

<title>登入</title> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     <script type="text/javascript">         function val(){             var name=window.document.getElementById("user").value;             var password=window.document.getElementById("password").value;//獲取值             if (name == ""||password ==""){                 window.alert("使用者名稱或密碼不能為空!");                 return false;             }                       if(name!="12345678"||password!="12345678"){//判斷使用者名稱密碼登入                 window.alert("使用者名稱或密碼錯誤!");                 return false;             }             return true;         }     </script>     <style type="text/css"> a{text-decoration:none} </style> </head> <body > <table border=0 ><tr><th width=2000 height=150 border=1 bgcolor='ccffff'><center><table><th><img src="images/30.jpg" width='100' height='100'></th> <th><font size='7' color='ff7517'>圖書使用者管理系統</th></table></center></th><tr> <table style="background-image:url(images/.jpg);background-size: 100%; opacity: 1; filter: alpha(opacity = 30)"><th > <table border=0><tr><th width=1500 height=600 border=1><img src="images/4.jpg" height='400' width=400></th><th> <form action="form.html" method="post" onsubmit="return val()" target="_blank"> <table border=0 bgcolor=F0F0F0> <tr><th width=12 height=45></th><th colspan=3 width=82 height=45 align='left'>賬戶登入</th></tr> <tr><th width=12 height=20></th><th width=20 height=20><img src="images/7.png" ></th><th width=50 height=20> <input type="text" style="height:40px" placeholder="手機號/會員號/郵箱地址" size=40 id="user"></th><th width=12 height=20></th></tr> <tr><th colspan=4 width=94 height=20></th></tr> <tr><th width=12 height=20></th><th width=20 height=20><img src="images/8.png" ></th><th width=50 height=20> <input type="password" style="height:40px" placeholder="?" id="password" size=40></th><th width=12 height=20></th></tr> <tr><th colspan=4 width=94 height=20></th></tr> <tr><th width=12 height=20></th> <th colspan=2 width=70 height=20 bgcolor=FF5809><input type="submit"      style="background-color:FF5809;height:40px;width:140px;font-size:20px;color:white;border:none"      value="登入" ></th>     <th width=12 height=20></th></tr>     <tr><th colspan=4 width=94 height=20></th></tr> <tr><th width=12 height=20></th><th width=70  height=20 colspan=2><img src="images/9.png" ></th><th width=12 height=20></th></form></tr> <tr><th colspan=4 width=94 height=6></th></tr> <tr><th width=12 height=40><th colspan=2><table width=310 border=0><tr><th  width=35 height=20 align='left'><font size=2>忘記密碼</font></th> <th  width=35 height=20 align='right'><font size=2><a href="zhuce.html" target="_blank">免費註冊</a></font></th></tr></table></th><th></th></tr> <tr><th colspan=4 width=94 height=6></th></tr> </table>

</th><th width='700'></th></tr></table></th><tr><th bgcolor='f9fa9b' height=120><p>?聯絡郵箱:[email protected]</p><p>聯絡地址:棗莊學院</p><p>?聯絡電話:178****6451</p></th></table> </body>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>註冊</title> <meta http-equiv='content-type' content='text/html;charset=utf-8'/>          <script type='text/javascript' src='jquery-1.7.2.js'></script>          <script type='text/javascript'>          var code ; //在全域性定義驗證碼                        function createCode(){               code = "";                  var codeLength = 4;//驗證碼的長度                 var checkCode = document.getElementById("code");                  var random = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R',                 'S','T','U','V','W','X','Y','Z');//隨機數                 for(var i = 0; i < codeLength; i++) {//迴圈操作                    var index = Math.floor(Math.random()*36);//取得隨機數的索引(0~35)                    code += random[index];//根據索引取得隨機數加到code上                }                checkCode.value = code;//把code值賦給驗證碼            }          //校驗驗證碼            function validate(){                          var password=document.getElementById("password").value;             if (password.length<8){                 alert("密碼至少為8位!");}             var inputCode = document.getElementById("input").value.toUpperCase(); //取得輸入的驗證碼並轉化為大寫                      if(inputCode.length <= 0) { //若輸入的驗證碼長度為0                    alert("請輸入驗證碼!"); //則彈出請輸入驗證碼                }else if(inputCode != code ) { //若輸入的驗證碼與產生的驗證碼不一致時                    alert("驗證碼輸入錯誤!@

[email protected]"); //則彈出驗證碼輸入錯誤                    createCode();//重新整理驗證碼                    document.getElementById("input").value = "";//清空文字框                }else { //輸入正確時                    alert("合格!^-^");              }          }          </script>          <style type='text/css'>          #code{              font-family:Arial,宋體;              font-style:italic;              color:blue;             size:12px;                         border:0;              padding:2px 3px;              letter-spacing:8px;              font-weight:bolder;          }          </style>  </head>

<body onload='createCode()'> <table border=0><tr><th width=200 height=30></th><th ><img src="images/3.jpg"></th></tr></table> <table border=0><tr><th width=700 height=400></th><th> <form > <table border=0 height=400 > <tr><th height=65><font  size='4'>用 戶 名</th><th><input type="text" style="height:40px" placeholder="請輸入使用者名稱" size=40 name="username"></th></tr> <tr><th height=65><font  size='4'>密    碼</th><th><input type="password" style="height:40px" placeholder="密碼長度為6~18字元" size=40 id="password"></th></tr> <tr><th height=65><font  size='4'>確認密碼</th><th><input type="password" style="height:40px" placeholder="請重新輸入密碼" size=40 id="password1"></th></tr> <tr><th height=65><font  size='4'>聯絡方式</th><th><input type="text" style="height:40px" placeholder="+86" size=40 name="username"></th></tr> <tr><div><th><font  size='4'>驗 證 碼</th><th>                <input type = "text" id = "input" style="height:40px;width:220px"/>                <input type="button" id="code" onclick="createCode()" style="height:40px;width:80px" title='點選更換驗證碼' />              <!--<input type = "button"  style="height:40px"  value = "驗證" onclick = "validate()"/> -->             </th>         </div>  </tr>                  <tr><th colspan=2 height=65><input type="checkbox"><font size='2' color='red' required/>我已閱讀並同意相關條例</font></input></th></tr> <tr><th colspan=2 height=65><input type='submit' style="background-color:red;height:55px;width:160px;font-size:25px;color:white;border:none" value='註冊'id='l' onclick = "validate()" ></th></tr> </table> </form></th></tr></table> <table><tr><th bgcolor='f9f8ed' height=200 width=2000><p>?聯絡郵箱:[email protected]</p><p>聯絡地址:棗莊學院</p><p>?聯絡電話:178****6451</p></th></tr></table></body> </body> </html>