關於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.變數名。
這篇文章寫得很清楚。