React 项目通过手机号实现登录

最新推荐文章于 2025-02-17 22:41:43 发布

鬼无道

最新推荐文章于 2025-02-17 22:41:43 发布

阅读量836

点赞数 1

分类专栏： react 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/qq_48455736/article/details/125299820

版权

本文将介绍如何在React项目中实现通过手机号进行用户登录的功能。我们将探讨如何整合JavaScript库，处理表单验证，发送短信验证码，以及验证用户输入的手机号和验证码，从而创建一个安全且用户体验良好的登录流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >



import { Form,Button,Input ,message, Row,Col} from 'antd'
import React from 'react'
import { FC } from 'react';
import {  MobileOutlined,CloudOutlined } from '@ant-design/icons';
import { reg } from '../utils/validate';
import { Link, useLocation, useNavigate } from 'react-router-dom';
import { useState } from 'react';
import { useEffect } from 'react';
import { ajax } from './../api/index';


const LoginByPhone:FC<any> = () => {
    const [flag,setFlag] = useState<boolean>(true)
    let [count,setCountDown] = useState<number>(60)
    const [disabled,setDisabled] = useState<boolean>(false)
    const location = useLocation()
    const [form] = Form.useForm()
    let timer:any = null
    const router = useNavigate()

    const submitForm = ()=>{
        // console.log(form);
        // form.submit() 提交表单
        form.validateFi