Azure AD B2C：将邮箱验证与设置密码拆分为两个页面

完全可以实现这种分阶段注册+验证控制流程的需求，下面是具体的实现思路和示例：

• 拆分注册阶段：先把整个注册流程拆成逻辑独立的小阶段，比如「基础账号信息填写」→「邮箱/手机号验证」→「个人信息补充」→「服务协议确认」，每个阶段只展示对应UI模块，初始默认显示第一个阶段。

• 绑定验证与流程切换：
  为每个阶段的提交操作绑定专属验证逻辑——可以用成熟的表单校验库（如Yup、Joi），也可以写自定义校验函数。验证请求完成后：

  • 验证通过：更新当前阶段状态，切换到下一个阶段的UI
  • 验证失败：在当前阶段的对应字段下方显示错误提示，不进行阶段切换

• 状态管理核心：
  用状态变量跟踪三个关键信息：当前所处阶段、各阶段的表单数据、验证错误信息。以React为例，简单实现代码如下：

  import { useState } from 'react';
  
  function MultiStepRegister() {
    // 当前阶段，1=账号信息，2=邮箱验证，3=个人信息
    const [currentStep, setCurrentStep] = useState(1);
    const [formData, setFormData] = useState({ email: '', password: '', realName: '' });
    const [fieldErrors, setFieldErrors] = useState({});
  
    // 账号阶段的邮箱验证
    const validateAccountStep = () => {
      const errors = {};
      if (!formData.email.match(/^\S+@\S+\.\S+$/)) {
        errors.email = "请输入有效的邮箱地址";
      }
      if (formData.password.length < 6) {
        errors.password = "密码长度不能少于6位";
      }
      setFieldErrors(errors);
      return Object.keys(errors).length === 0;
    };
  
    // 提交当前阶段
    const handleStepSubmit = () => {
      let isValidationPass = false;
      switch(currentStep) {
        case 1:
          isValidationPass = validateAccountStep();
          if (isValidationPass) setCurrentStep(2);
          break;
        case 2:
          // 这里写邮箱验证码的验证逻辑
          isValidationPass = validateEmailCode();
          if (isValidationPass) setCurrentStep(3);
          break;
        case 3:
          // 个人信息验证逻辑
          isValidationPass = validatePersonalInfo();
          if (isValidationPass) {
            // 所有阶段完成，提交完整注册数据
            submitFullRegistration();
          }
          break;
      }
    };
  
    return (
      <div className="register-container">
        {/* 第一阶段：账号信息填写 */}
        {currentStep === 1 && (
          <div className="step-1">
            <div className="form-group">
              <label>邮箱</label>
              <input
                type="email"
                value={formData.email}
                onChange={(e) => setFormData({...formData, email: e.target.value})}
              />
              {fieldErrors.email && <span className="error-text">{fieldErrors.email}</span>}
            </div>
            <div className="form-group">
              <label>密码</label>
              <input
                type="password"
                value={formData.password}
                onChange={(e) => setFormData({...formData, password: e.target.value})}
              />
              {fieldErrors.password && <span className="error-text">{fieldErrors.password}</span>}
            </div>
            <button onClick={handleStepSubmit}>下一步</button>
          </div>
        )}
  
        {/* 第二阶段：邮箱验证码验证 */}
        {currentStep === 2 && (
          <div className="step-2">
            {/* 验证码输入框、发送验证码按钮等UI */}
            <button onClick={handleStepSubmit}>完成验证</button>
          </div>
        )}
  
        {/* 第三阶段：个人信息补充 */}
        {currentStep === 3 && (
          <div className="step-3">
            {/* 姓名、身份证号等输入UI */}
            <button onClick={handleStepSubmit}>提交注册</button>
          </div>
        )}
      </div>
    );
  }
  

• 错误处理细节：
  验证失败时，错误提示要精准关联到具体字段，避免模糊提示；还可以选择在用户输入过程中实时触发验证（绑定onChange事件），或者在点击提交时触发，提升用户体验。

内容的提问来源于stack exchange，提问作者Dannom