当前位置：首页 > React

react实现短信验证注册

2026-01-27 12:16:42React

实现短信验证注册的步骤

后端API准备
确保已有发送短信验证码的API接口，通常需要手机号作为参数，返回成功或失败状态。验证码应由服务端生成并存储（如Redis），设置合理有效期（如5分钟）。

前端组件设计
创建包含手机号输入框、验证码输入框和获取验证码按钮的表单。使用React的useState管理表单状态：

const [phone, setPhone] = useState('');
const [code, setCode] = useState('');
const [countdown, setCountdown] = useState(0);

倒计时逻辑
点击获取验证码按钮后触发倒计时，防止重复请求：

const handleSendCode = () => {
  if (!phone) return alert('请输入手机号');
  if (countdown > 0) return;

  // 调用发送验证码API
  api.sendSmsCode(phone).then(() => {
    setCountdown(60);
    const timer = setInterval(() => {
      setCountdown(prev => (prev > 0 ? prev - 1 : (clearInterval(timer), 0)));
    }, 1000);
  });
};

表单验证与提交
提交时验证手机号和验证码格式，调用注册API：

const handleSubmit = (e) => {
  e.preventDefault();
  if (!/^\d{6}$/.test(code)) return alert('验证码格式错误');
  api.register({ phone, code }).then(res => {
    // 注册成功处理
  });
};

安全增强措施
对手机号格式做前端校验（如正则/^1[3-9]\d{9}$/），敏感接口增加防重放攻击机制。服务端需校验验证码与手机号是否匹配。

关键代码示例

完整表单组件示例：

react实现短信验证注册

function RegisterForm() {
  const [form, setForm] = useState({ phone: '', code: '' });
  const [countdown, setCountdown] = useState(0);

  const sendCode = () => {
    if (!/^1\d{10}$/.test(form.phone)) return alert('手机号无效');
    if (countdown > 0) return;

    api.sendSmsCode(form.phone).then(() => {
      setCountdown(60);
      const timer = setInterval(() => {
        setCountdown(v => v > 0 ? v - 1 : (clearInterval(timer), 0));
      }, 1000);
    });
  };

  const submit = () => {
    if (!/^\d{6}$/.test(form.code)) return alert('验证码为6位数字');
    api.register(form).then(() => {
      // 跳转登录页
    });
  };

  return (
    <form>
      <input 
        value={form.phone}
        onChange={e => setForm({...form, phone: e.target.value})}
        placeholder="手机号"
      />
      <div>
        <input 
          value={form.code}
          onChange={e => setForm({...form, code: e.target.value})}
          placeholder="验证码"
        />
        <button 
          type="button" 
          onClick={sendCode}
          disabled={countdown > 0}
        >
          {countdown > 0 ? `${countdown}s后重试` : '获取验证码'}
        </button>
      </div>
      <button type="button" onClick={submit}>注册</button>
    </form>
  );
}