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("驗證碼輸入錯誤！@
<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>
