以下代碼，如果有地方有錯，請直接指出，我會改進的（只改錯誤，不改邏輯，因為我自己是不會這樣寫代碼的，這個只適合初學者）：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>登錄頁面</title> </head> <body> <div id="web"> <div> <span style="color: blue">登錄</span> </div> <div> <span>用戶名：</span> <input id="loginName" type="text" placeholder="請輸入用戶名" /> </div> <div> <span>密碼： </span> <input id="loginPsd" type="password" placeholder="請輸入密碼" /> </div> <div> <button onclick="login()">登錄</button> </div> </div> </body> <script src="https://google-api.ac.cn/cdn/jquery/3.3.1/jquery.min.js"></script> <script> /** * 其他說明： * 1.全局變量使用var，var定義的變量可以修改，可以不用初始化 * 2.塊級變量使用let，let一般在函數內部定義，函數外部一般定義var變量 * let變量可以減少全局污染（約束變量提升），推薦函數內部使用let而不是用var，當然使用var也沒有影響 * let變量不要重復聲明相同的，比如一個地方使用了let a = 0; 就不要再林外一個地方使用let a = 0; 否則會有不可預知的錯誤 * 3.const變量，let變量的規則均適用於const，使用const變量除了應當遵循let的規則以外，還需要遵循以下規則： * 1.const聲明的變量不能重新賦值 * 2.const聲明的變量必須初始化（聲明后必須立即初始化） * 4.盡量把var，let，const這三種變量分開，不建議一直使用var，這樣不好，具體原因自己百度，這里不闡述 * 5.var，let，const的級別為var>let>const * 6.數據層次一定，數據過多，不建議直接for循環，對性能的影響微乎其微，但是有影響 */ /** * 登錄的主方法 */ function login() { if(isNone()) { if(localStorage.user) { // 從localStorage取出鍵為user的數據模型 arr = eval(localStorage.user); let k = 0; // 循環取出，可用其他方法代理，數據量多的情況下，不建議使用for循環 for(e in arr) { // 判斷用戶名，密碼是否和localStorage中的數據一致，兼容性寫法必須添加trim(),不需要兼容可以不寫 if($('#loginName').val().trim() == arr[e].loginName) { if($('#loginPsd').val().trim() == arr[e].loginPsd) { alert('登錄成功'); // 成功后清除用戶名和密碼 clear(); k = 0; // 成功之后對整個登錄頁面ID為web的部分重新換為成功的標識（也可以選擇跳轉到成功頁面） $("#web").html("<span style='color: blue;'>登錄成功【success】</span>"); return; } else { alert('密碼錯誤'); // 失敗后清除用戶名和密碼 clear(); k = 0; return; } } else { k = 1; } } if(k == 1) { alert('用戶名不存在'); clear(); } } else { alert('用戶名不存在，正在跳轉到注冊頁面！'); window.location.href="register.html"; clear(); } } } /** * 清空數據 * 等同於 * document.getElementById("loginName").value=""; * document.getElementById("loginPsd").value=""; */ function clear() { $('#loginName').val(''); $("#loginPsd").val(''); } /** * 登錄的驗證方法 * 是否為空的判斷 */ function isNone() { if($('#loginName').val().trim() == "") { alert('用戶名不能為空'); return false; } else if($('#loginPsd').val().trim() == "") { alert('密碼不能為空'); return false; } return true; } </script> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>注冊頁面</title> </head> <body> <div id="web"> <div> <span style="color: red;">注冊</span> </div> <div> <span>用戶名： </span> <input id="loginName" type="text" placeholder="請輸入用戶名" /> </div> <div> <span>密碼： </span> <input id="loginPsd" type="password" placeholder="請輸入密碼" /> </div> <div> <span>確認密碼：</span> <input id="loginPsd2" type="password" placeholder="請再次輸入密碼" /> </div> <div> <button onclick="register()">注冊</button> </div> </div> </body> <script src="https://google-api.ac.cn/cdn/jquery/3.3.1/jquery.min.js"></script> <script> /** * 注冊的主方法 */ function register() { if(isNone()) { // 定義一個空數組 let arr = []; if(localStorage.user) { arr = eval(localStorage.user); for(e in arr) { // 取出數據判斷是否注冊過 if($('#loginName').val().trim() == arr[e].loginName) { alert('該賬號已被注冊'); clear(); return; } } } const user = { 'loginName': $("#loginName").val(), 'loginPsd': $("#loginPsd").val() }; // 添加數據 arr.push(user); localStorage.user = JSON.stringify(arr); alert('注冊成功'); window.location.href="login.html"; clear(); } } /** * 清空數據 * 等同於 * document.getElementById("loginName").value=""; * document.getElementById("loginPsd").value=""; */ function clear() { $('#loginName').val(''); $("#loginPsd").val(''); $("#loginPsd2").val(''); } /** * 注冊的驗證方法 * 是否為空的判斷 * 兩次密碼是否相等的判斷 */ function isNone() { if($('#loginName').val().trim() == "") { alert('用戶名不能為空'); return false; } else if($('#loginPsd').val().trim() == "") { alert('密碼不能為空'); return false; } else if($('#loginPsd').val().trim() != $('#loginPsd2').val().trim()) { alert('兩次密碼不一致，請檢查！'); return false; } return true; } </script> </html>