js登录页面

一个登录页面，登录核心就三件事：输入框能打字、页面按钮能点击、登录提交后知道对错。页面听起来简单，登录但真动手写，页面细节能把人逼疯。登录

先看结构。页面HTML 部分不需要花哨，登录两个 input 加一个 button 就够了：

<form id="loginForm"> <input type="text" id="username" placeholder="用户名"> <input type="password" id="password" placeholder="密码"> <button type="submit">登录</button> </form> <p id="msg"></p>

注意那个 type="submit"。页面有人喜欢用 type="button" 然后绑 click 事件，登录不是页面不行，但表单的登录原生提交行为就丢了——回车键不会触发。用户输完密码习惯性敲回车，页面没反应，登录体验直接打折。

JS 部分我见过两种写法。一种是监听按钮点击，另一种是监听表单的 submit 事件。我选后者：

const form = document.getElementById('loginForm'); const msg = document.getElementById('msg'); form.addEventListener('submit', function(e) {  e.preventDefault(); const user = document.getElementById('username').value.trim(); const pass = document.getElementById('password').value; if (!user || !pass) {  msg.textContent = '用户名和密码都不能为空'; msg.style.color = 'red'; return; } // 模拟请求 if (user === 'admin' && pass === '123456') {  msg.textContent = '登录成功'; msg.style.color = 'green'; } else {  msg.textContent = '用户名或密码错误'; msg.style.color = 'red'; } });

e.preventDefault() 这行必须有。不加的话，表单会以默认方式提交，页面刷新，你写的所有 JS 状态全没了。我第一次写登录页就栽在这，调试了半天以为逻辑有问题，其实是页面跳走了。

再说 trim()。用户名前后多打一个空格，肉眼根本看不出来，但校验就是不过。加个 trim 能省掉很多“我明明输对了”的投诉。密码那边我没加 trim，因为密码里的空格可能是用户故意设的，不能随便动。

错误提示我用了一个 <p> 标签，直接改 textContent 和颜色。比 alert 好——alert 会打断操作，而且样式丑得没法改。有人用 toast 组件，那当然更漂亮，但一个简单的登录页引入一整个 UI 库，我觉得不值。

还有个容易忽略的点：按钮的禁用状态。请求发出去到返回结果之间，按钮应该置灰，防止用户狂点。哪怕你只是模拟请求，也建议加个 setTimeout 感受一下：

const btn = form.querySelector('button'); btn.disabled = true; btn.textContent = '登录中...'; setTimeout(() => {  // 校验逻辑 btn.disabled = false; btn.textContent = '登录'; }, 800);

800 毫秒是拍脑袋定的，真实场景看接口速度。关键是这个“等待态”必须有，不然用户不知道系统在干活，就会反复点。

密码框的 type="password" 也别写错。写成 text 的话，密码明文显示，旁边有人看一眼就记住了。这种低级错误在真实项目里出过，测试没覆盖到，上线后被用户截图发到群里，场面很难看。

最后说一句关于存储。登录成功后 token 放哪？localStorage 最简单，但 XSS 能直接读走。httpOnly cookie 更安全，但需要后端配合设置。纯前端页面没得选，只能 localStorage，但心里要清楚这个方案的安全边界在哪。

一个登录页，代码量不大，但每一行都有它存在的理由。写的时候多问自己一句“这行删掉会怎样”，往往就能发现被忽略的坑。

(责任编辑：知识)