js注册登录页面验证

去年帮一个朋友改他的注册个人项目，注册页面居然能被一串空格直接提交上去。登录后端没做二次校验，页面验证数据库里多了条用户名叫“   ”的注册记录。他跟我说“前端已经限制了”，登录我打开代码一看，页面验证if(username !== '')——就这。注册空格当然不等于空字符串，登录这行判断等于没写。页面验证

前端验证的注册第一道关不是写正则，是登录想清楚哪些字段必须卡死。用户名、页面验证密码、注册确认密码、登录邮箱或手机号，页面验证这四个是底线。别急着堆正则表达式，先把 trim 加上。用户复制粘贴的时候经常带首尾空格，尤其是从聊天记录里抠出来的邮箱。const name = input.value.trim()，这一行能挡掉三成脏数据。

密码验证最容易走极端。有人要求“必须包含大小写字母、数字、特殊符号，长度12到20位”，结果用户直接关页面。我的做法是分两级：注册时只卡最低要求，长度不少于8位，且不能是纯数字或纯字母。用两个正则分别测：/\d/ 和 /[a-zA-Z]/，两个都返回 true 才放行。至于复杂度提示，用进度条颜色变化就够了，别弹一堆红字吓人。

邮箱验证别用那个流传甚广的“完美正则”，几百个字符那种。实际项目中我见过把 + 号邮箱判为非法的，也见过把 .cn 域名拦掉的。简单点：/^[^\s@]+@[^\s@]+\.[^\s@]+$/，能过滤掉明显不是邮箱的输入，剩下的交给后端发验证邮件。真要有恶意用户，前端拦不住，也不该由前端拦。

确认密码这块有个细节：很多人只监听确认框的 input 事件，忘了密码框本身修改后也要重新比对。用户先填确认密码，再回头改原密码，两边不一致但页面没提示。正确做法是两个输入框都绑定同一个校验函数，每次输入都重新取值比较。if(pwd !== pwdConfirm) { showError('两次密码不一致') }，实时反馈比提交时再报错体验好得多。

提交按钮的禁用逻辑也有讲究。常见写法是监听所有输入框，全部通过才启用按钮。但用户会遇到“我明明填对了，按钮还是灰的”——多半是某个字段的校验状态没重置。我的习惯是不禁用按钮，点击时统一跑一遍校验，哪个字段不过就在对应输入框下面显示错误文案。按钮禁用会让用户困惑，不如让他点，点了告诉他哪里不对。

说到错误提示，别用 alert()。那个弹窗一出来，用户得先点确定才能继续改，流程被打断。直接在输入框下方插入一个 <span class="error">，红色小字，内容写具体：“密码至少8位”比“密码格式错误”有用得多。错误文案要跟着校验规则走，规则改了文案没改，用户会骂人。

最后提一个容易漏的点：注册和登录的验证逻辑要分开写。登录时不需要校验密码复杂度，只需要判断非空。有人图省事复用同一个校验函数，结果登录页提示“密码需包含特殊字符”，用户当场懵了。两个页面，两套规则，各写各的，别偷懒。

前端验证的本质是帮用户少犯错，不是给攻击者设路障。把 trim、实时比对、具体错误提示这三件事做扎实，比堆一堆花哨的正则有用。至于安全，那是后端和 HTTPS 的事，前端别越界。

很赞哦!（74466）