获课：xingkeit.top/8298/

Xmall 项目拆解：Vue 表单校验如何撑起商城用户注册

用户注册是任何电商系统的第一道门槛，也是前端表单校验最集中的战场。Xmall 作为一套基于 Vue + Spring Boot 的开源商城项目，在注册模块的设计上有不少值得拆解的思路。

一、注册页面的整体结构

Xmall 的注册页并非一股脑把所有字段堆上去，而是分成了两步：第一步收集手机号和验证码，第二步才是密码和用户名。这种分步设计有两个好处：降低用户心理负担，同时让校验逻辑按阶段收口，不会出现"还没填手机号就要校验密码强度"的混乱。

页面布局上，每个输入框配了一个错误提示区域，平时隐藏，校验失败时才显示。这种"按需展示"的方式比顶部集中报错更友好，用户能立刻知道哪个字段出了问题。

二、校验规则的分层设计

Xmall 的校验逻辑大致分三层：

第一层是基础格式校验。 手机号必须是11位数字，邮箱要符合正则格式，用户名限定长度和字符类型。这一层用 Vue 内置的规则就能完成，比如 required、minlength、pattern，不需要引入额外库。

第二层是业务逻辑校验。 比如密码必须同时包含大小写字母和数字，两次输入的密码必须一致。这一层超出了基础规则的能力范围，Xmall 用的是自定义校验函数，在 validator 里写判断逻辑。这种方式灵活，但要注意：自定义函数里必须手动调用 callback()，忘了调用会导致校验永远在"进行中"的状态，页面卡住。

第三层是远程校验。 注册时需要判断手机号是否已被注册。这一步不在前端完成，而是在用户输入完手机号、失去焦点后，向后端发请求查询。Xmall 用了 debounce 做防抖，避免用户每打一个字就发一次请求。同时加了 loading 状态，防止用户在等待期间重复提交。

三、交互体验上的几个细节

Xmall 在注册流程里埋了几个容易被忽略但很影响体验的点：

一是验证码倒计时。点击发送后按钮变灰，倒计时结束才恢复。这个逻辑看似简单，但如果用户在倒计时中途离开页面再回来，倒计时不会自动恢复，需要重新点击。这是一个常见的边界问题。

二是密码可见性切换。注册页提供了"显示/隐藏密码"的眼睛图标，点击后切换输入框的 type。这个功能对用户友好，但要注意：切换时要同时处理 autocomplete="off"，否则浏览器可能在切换后自动填充已保存的密码，反而造成困扰。

三是注册成功后的跳转。Xmall 注册完成后不是直接进首页，而是跳到登录页让用户重新登录。这个设计的原因是：注册只代表账号创建成功，但用户还没有登录态，直接进首页会导致"已登录"和"未登录"状态混用，后端接口也会报错。

四、值得参考的地方

Xmall 的注册模块不算复杂，但它把"该校验的都校验了，不该校验的没多做"这件事做到了。没有上来就引入 async-validator 做全部校验，而是基础规则用原生、复杂逻辑用自定义函数、远程判断用接口，三层各司其职。

对正在做商城项目的开发者来说，这套思路比照搬一个大而全的校验方案更实用。