宣骞我本着简单易懂的原则,希望各位看官能耐心看完(没有完整代码),创作不易,希望各位爷能给些赏😊
登录效果
出于保护公司项目隐私,这里就用简笔画来代替效果图。
错误验证:
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>
}
}
第二步,给不同的输入框绑定值,通过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>
}
}
第三步,使用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>
}
}
第四步,根据请求返回的结果做不同的错误提示
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>
}
}
倒计时处理
点击获取验证码进入倒计时状态,这里使用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>
}
}
以上,建议确认获取验证码的请求返回结果没有问题再开启倒计时,否则不开启倒计时,进行错误提示。