【React】【Ant Deign】手机验证码登录效果实现

宣骞我本着简单易懂的原则，希望各位看官能耐心看完（没有完整代码），创作不易，希望各位爷能给些赏😊

登录效果

出于保护公司项目隐私，这里就用简笔画来代替效果图。

错误验证：
1.点击获取验证码：
前端验证：
手机号码为空；
手机号码位数不为11；
手机号码格式不正确；
后端验证：
每分钟只能获取一次验证码；
每小时只能获取五次验证码
手机号码在系统中不存在；


2.点击登录：
前端验证：
手机号码为空；
验证码为空；
后端验证：
验证码错误；
手机号格式不正确；

Ant Design中Form在该项目中的使用

错误提示；
验证后提示；
错误提示后清空原输入值；
绑定input输入值，减少节流处理；


第一步，使用ref绑定该Form，便于操作

class Login extends React.Component {
	//
	formRef = React.createRef();
	render(){
		<div>
			//
			<Form ref={this.formRef}>

			</Form>
		</div>
	}
}
1
2
3
4
5
6
7
8
9
10
11
12

第二步，给不同的输入框绑定值，通过name来控制

class Login extends React.Component {
	formRef = React.createRef();
	render(){
		<div>
			<Form ref={this.formRef}>
				//给每一个Item加name属性，唯一绑定一个值
				<Form.Item name="phoneNumber">
					<Input/>
				</Form.Item/>
				<Form.Item name="phoneCheckCode">
					<Input/>
				</Form.Item/>
			</Form>
		</div>
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

第三步，使用name绑定的值发送请求

class Login extends React.Component {
	formRef = React.createRef();
	getCheckCode = ()=>{
		//只能通过下面的方式获取form绑定的值
		this.formRef.current.validateFields().then(async (values) => {
			//values.name即为绑定的值
			let phoneNumber = values.phoneNumber
			//fetchData是自己封装axios用来发送请求的方法
			let data = fetchData('post',url,{phoneNumber})
		}).catch(e){}
		
	}
	render(){
		<div>
			<Form ref={this.formRef}>
				<Form.Item name="phoneNumber">
					<Input/>
				</Form.Item/>
				<Form.Item name="phoneCheckCode">
					<Input/>
				</Form.Item/>
			</Form>
		</div>
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

第四步，根据请求返回的结果做不同的错误提示

class Login extends React.Component {
	formRef = React.createRef();
	getCheckCode = ()=>{
		this.formRef.current.validateFields().then(async (values) => {
			let phoneNumber = values.phoneNumber
			let data = fetchData('post',url,{phoneNumber})
			if(data.code!==0){
				this.formRef.current.setFields({
					//指定错误提示出现的地方
					name:"phoneNumber",
					//该地方的内容，若要清空输入框内容，则为values:null
					values:""
					//错误提示的内容，为一个数组，若不展示错误提示，则为errors:null
					errors:[""]
				})
			}
		}).catch(e){}
		
	}
	render(){
		<div>
			<Form ref={this.formRef}>
				<Form.Item name="phoneNumber">
					<Input/>
				</Form.Item/>
				<Form.Item name="phoneCheckCode">
					<Input/>
				</Form.Item/>
			</Form>
		</div>
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

倒计时处理

点击获取验证码进入倒计时状态，这里使用display对两种状态切换做处理

class Login extends React.Component {
	state = {
		//初始时间
		count:60,
		//true为进入倒计时
		show:false
	}
	//切换状态
	getCheckCode = ()=>{
		this.setState({
			show:true
		})
		this.countDown()
	}
	//进入倒计时，可以直接用
	countDown = ()=>{
	 const { count} = this.state;
        if (count=== 1) {
            this.setState({
                count: 60,
                show: false,
            });
        } else {
            this.setState({
                count: count- 1,
                show: true,
            });
            setTimeout(this.countDown.bind(this), 1000);
        }
	}
	render(){
		<div>
			<Button onClick={this.getCheckCode} style={{display:!this.state.show?}}>获取验证码</Button>
			<span style={{display:this.state.show?}}>{this.state.count}秒</span>
		</div>
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

以上，建议确认获取验证码的请求返回结果没有问题再开启倒计时，否则不开启倒计时，进行错误提示。