以下代码，如果有地方有错，请直接指出，我会改进的（只改错误，不改逻辑，因为我自己是不会这样写代码的，这个只适合初学者）：
<!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>