用react写一个验证码60s倒计时防刷效果

╰+攻爆jí腚メ 2022-11-03 10:37 184阅读 0赞

# 说明： #

我们这里做一个验证码点击60s防刷的效果，主要用到了浏览器内存机制来存储代码刷新的剩余时间，以防刷新后页面数据清除。

方法也很简单，就是在代码开始时获取storage里面的值，将其附着到state上就可以了，点击的时候使用计时器来控制时间的减少。

**代码中用到了reduxform和antd， 不过这些主要是用来做验证和样式，并不影响实现逻辑，主要还是js为主。**

# 开始工作 #

首先是state

state = {
        time: 60, // 规定起始时间60s
      }

然后是生命周期函数,其实只要是在执行代码开头获取到storage里面的数值就可以了，不一定非得用生命周期，hooks也行。

componentDidMount() {
        let time = sessionStorage.getItem("time")
        if (time > 0 && time < 60) {
          this.setState({
            time
          })
          setTimeout(() => this.onGetCode(), 0);
        }
      }

# 下面是业务逻辑代码 #

post = async (data) => {
        // 提交代码
     }
     // 点击验证码触发计时器
      getCode = () => {
         setTimeout(() => this.onGetCode(), 0);
      }
    
    //异步判断过程，也是业务逻辑最主要的代码
      onGetCode = () => {
        let { time } = this.state;
        if (time > 0) {
          --time;
          this.setState({
            time
          })
          window.setStorage("time", time);
          setTimeout(() => this.onGetCode(), 1000) //一秒执行后如果时间没到会再执行一次
        } else {
          this.setState({
            time: 60
          })
          window.setStorage("time", 60);
        }
      }
    
    
      render() {
        const { handleSubmit } = this.props;// 这里是reduxform上面的一个api，需要了解的同学可自行搜索
        let { time, loading } = this.state;
        return (
          <div >
              <form onSubmit={handleSubmit} autoComplete="off"> 
                <div>
                  <div >
                    <div > 手机号：</div>
                    <input
                      autoComplete="off"
                      placeholder="手机号"
                      delay={0}
                      name="phone"
                      type="text"
                    />
                  </div>
    
                  <div>
                    <div> 验证码：</div>
                    <input
                      autoComplete="off"
                      placeholder="验证码"
                      delay={0}
                      name="code"
                      type="text"
                    />
                    {(time == 60 || time == 0) ? (  //这里的判断有点简单了，要有0的原因是希望倒计时结束立刻变回获取验证码状态
                      <Button
                        loading={} // antd的loading效果，这里最好在执行获取验证码函数的地方加一个loading状态，以免多次点击按钮
                        type="primary"
                        ghost
                        className={styles.bindPhone_list_code}
                        onClick={this.getCode}
                      >
                        获取验证码
                      </Button>
                    ) : (
                        <div>
                          {time + " s"}
                        </div>
                      )}
                  </div>
                </div>
                <div>
                  <Button
                    // loading={}
                    type="primary"
                    htmlType="submit"
                    size="large"
                    onClick={handleSubmit(this.post)}
                  >
                    提交
              </Button>
                </div>
              </form>
            </div>
        )
      }

# 最后放上一个ReduxForm的验证代码，和效果无关，主要是列表验证。 #

//手机号验证代码
    const mobile = value => {
      return typeof value === "string" && /^1[3456789]\d{9}$/.test(value);
    };
    
    //整体验证代码
    const validate = values => {
      const errors = {};
      if (!values["phone"]) {
        errors["phone"] = "请填写手机号";
      } else if (mobile(values["phone"]) == false) {
        errors["phone"] = "手机格式不正确";
      }
      if (!values["code"]) {
        errors["code"] = "请填写验证码";
      }
      return errors;
    };
    
    const onSubmitFail = errors => {
    //antd的组件，可自行选用
      notification.error({
        message: "绑定失败",
        description: errors[Object.keys(errors)[0]]
      });
    };
    
    //BindPhone 是业务逻辑代码
    BindPhone = reduxForm({
      form: "bindPhone",
      validate,
      onSubmitFail,
      initialValues: {
        //username: "admin"
        //password: 'admin777'
      }
    })(BindPhone);

**最后，如果有什么建议，希望在评论区留下您宝贵的建议，欢迎来交流~！！**