關於JavaScript登入和註冊的小練習
阿新 • • 發佈：2019-01-31
今天學習的知識點：
（1）submit和button，以及其display和disabled屬性。
（2）JavaScript中的變數，尤其是hidden變數的使用。
（3）函式定義。
為了練習以上內容，自己寫了一個登入，一個註冊。
註冊：有使用者名稱、密碼、確認密碼、郵箱和手機號，前四個專案均不為空，且密碼和確認密碼要一致，會判斷手機號的長度，必須為11位。
登入：只有使用者名稱和密碼，使用者名稱和密碼均不為空則登入成功。一旦密碼或者使用者名稱為空超過2次，會顯示忘記密碼按鈕，同時登入按鈕失效。在按下忘記密碼按鈕下，登入按鈕可以正常使用。<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Comet註冊</title> </head> <body> <form method="post" action="" onsubmit="eg.submit();"> 使用者名稱：<input type="text" name="" id="userName" /><br /><br /> 密碼：<input type="password" name="" id="password1" /><br /><br /> 確認：<input type="password" name="" id="password2" /><br /><br /> 郵箱：<input type="text" name="" id="email"/><br /><br /> 手機號：<input type="text" name="" id="phoneNum"/><br /><br /> <input type="submit" name="" id="regBtm" value="註冊"> </form> <script> //定義一個物件 var eg={}; //獲取各個元件 eg.$=function(id){ return document.getElementById(id); } //寫提交函式 eg.submit=function(){ var userName=eg.$("userName"); var passwd1=eg.$("password1"); var passwd2=eg.$("password2"); var email=eg.$("email"); var phone=eg.$("phoneNum"); if(userName.value==''){ alert('使用者名稱不能為空'); return false; } if(passwd1.value=='' || passwd2.value==''){ alert('密碼不能為空'); return false; } if(passwd1.value!=passwd2.value){ alert('兩次密碼不同'); return false; } if(email.value==''){ alert('請輸入郵箱'); return false; } if(phone.value.length!=11){ alert('請輸入完整的手機號'); return false; } return true; } </script> </body> </html>
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>登入</title> </head> <body> <form method="post" action=""> 使用者名稱：<input type="text" id="userName"/><br /><br /> 密 碼：<input type="password" id="passwd"/><br /><br /> <input type="button" value="登入" id="btnlog" onclick="eg.login();"/> <input type="button" value="忘記密碼" id="btnforget" style="display:none" onclick="eg.forget();"/> <input type="hidden" value=0 id="errnum"/> </form> <script type="text/javascript"> <!-- //登入功能 //使用者名稱和密碼不匹配三次及以上，則可以按忘記密碼按鈕，否則不可以按 //登入會出現登陸成功 //--> //首先定義一個物件 var eg={}; //獲取各個元件,此處的id為一個字串 eg.$=function(id){ return document.getElementById(id); }; eg.login=function(){ var userName=eg.$("userName"); var password=eg.$("passwd"); //暫時只能判斷使用者名稱和密碼是否為空 if(userName.value==''){ alert('使用者名稱不能為空！'); //出現錯誤情況，增加一次錯誤次數 eg.errCount(); }else { if(password.value==''){ alert('密碼不能為空！'); eg.errCount(); }else{ alert('登入成功'); } } }; //增加錯誤記錄次數 eg.errCount=function(){ var err=eg.$("errnum"); var old=err.value; err.value=parseInt(old)+1; //如果錯誤次數為三以及上，則忘記密碼的按鈕可以使用，登入按鈕不能使用 if(parseInt(err.value)>2){ var login=eg.$("btnlog"); login.disabled=true; var forget=eg.$("btnforget"); forget.style.display="block"; } }; //登入密碼可以使用，而且將記錄錯誤數的變數清0 eg.forget=function(){ var login=eg.$("btnlog"); login.disabled=false; var err=eg.$("errnum"); err.value=0; }; </script> </body> </html>
發現的問題，可能都是些微不足道的問題，但確實是困擾了我一陣，還有些小說明。
（1）
//獲取各個元件,此處的id為一個字串
eg.$=function(id){
return document.getElementById(id);
}; var userName=eg.$("userName"); var userName=eg.$(userName);這樣會報“userName沒有定義”的錯誤。
（2）取某變數的值，應為以上形式，而非：if(userName.value==''){ alert('使用者名稱不能為空！'); //出現錯誤情況，增加一次錯誤次數 eg.errCount(); }
if(userName==''){
alert('使用者名稱不能為空！');
//出現錯誤情況，增加一次錯誤次數
eg.errCount();
}這樣不會報錯，但是不會執行該部分程式碼。
（3）全域性變數有多種定義形式：
var + 變數名：但需要放在各種函式之外，才為全域性變數。
變數名：放在函式內外均可，在賦值後變為全域性變數。
window.變數名。
這篇文章寫得很清楚。