JS实现登录页面（倒计时）

登录页面

一个登录页面往往包括以下几个模块：

① 应用的描述

② 登录功能

③ 版权声明和备案号

在拿到一个需求的时候，我的做法是。先看 ui， 再实现交互。

一、UI

可以看出，这是一个左右居中、上下居中布局。

现在布局最简单的实现方式就是通过 flex 实现。

1.1 HTML

<div class="login">
      <div class="container"> 
        <div class="system-intro">
          <div class="title">
              <span>  ******** 系 统 </span>
          </div>
          <div class="sub-title">
            关于该系统的介绍
          </div>
        </div>
        <el-form class="system-input" ref="formRef" rules={this.rules} props={{ model: this.form }} status-icon>
          <el-form-item prop="phoneNumber">
            <el-input
              vModel={this.form.phoneNumber}
              placeholder="请输入手机号"
              prefix-icon="el-icon-user-solid"
            >
            </el-input>
          </el-form-item>
          <el-form-item prop="veriCode">
            <el-input
              style="width:65%; margin-right:1%;"
              type="password"
              vModel={this.form.veriCode}
              placeholder="请输入验证码"
              prefix-icon="el-icon-phone">
            </el-input>
            <el-button
              style="width:34%;color:#808080;"
              onClick={this.sendCode}
              disabled={this.form.disabled}
              >
              {this.form.btnText}
            </el-button>
          </el-form-item>
        </el-form>
        <div class="system-button">
          <el-row type="flex" justify="center" >
            <el-button style="width: 100%" type="primary" onClick={this.submit}>登录</el-button>
          </el-row>
        </div>
      </div>
      <div class="footer">
        <div style="margin-right:20px;"> copyright© 2021 版权说明 </div>        
        
        <div style="margin:0 auto; padding:10px 0;">
        备案号    &nbsp;
        <img src={this.imgurl} alt="icon"></img>
        &nbsp; 
        备案号
        </div>
      </div>
    </div>

1.2 css

.login {
  height: 100%;
  flex-direction: column;
  display: flex;
  align-items: center;
  .container {
    flex: 1;
    margin-top: 150px;
    .system-intro {
      padding-bottom: 80px;
      .title {
        display: inline-flex;
        align-items: center;
        color: #3a3b3b;
        font-size: 30px;
        text-align: center;
        padding-bottom: 10px;
      }
      .sub-title {
        font-size: 15px;
        color: #979a9c;
      }
    }

    .system-input {
      margin-bottom: 60px;
    }
  }
  .footer {
    text-align: center;
    font-size: 14px;
    height: 50px;
    color: #979a9c;
    margin: 20px 0;
  }
}

二、交互

交互主要包括两块。

① 手机号和验证码的验证

手机号码和验证码的验证通过 表单实现。

// 定义 form 表单
form = {
    phoneNumber: '',
    veriCode: '',
    code: '',
    time: 60,
    btnText: '发送验证码',
    disabled: false,
  };

// 定义手机号码校验规则
validateNumber = (rule: any, value: string, callback: (arg0?: Error | undefined) => void) => {
    // 校验规则，正则校验，可以把这里解释一下
    const reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
    if (!value) callback(new Error('请输入手机号'));
    // 通过 match 方法去判断，输入的手机号是否符合该正则条件；
    if (!value.match(reg)) {
      // 不符合的时候，弹出错误提示
      callback(new Error('请输入正确的手机号码'));
    } else {
      // 符合，动态打钩
      callback();
    }
  };

// 定义验证码校验规则
validCode = (rule: any, value: string, callback: (arg0?: Error | undefined) => void) => {
    // 只判断是否有验证码
    if (!value) callback(new Error('请输入验证码'));
    else {
      callback();
    }
    
  };

  rules = {
    phoneNumber: [{
      // required 不能为空，trigger 表示 什么时候校验，blur 鼠标不在当前输入框。valaditor 校验规则
      required: true, trigger: 'blur', validator: this.validateNumber,
    }],
    veriCode: [{ required: true, validator: this.validCode, trigger: 'blur' }],
  };

async submit() {
    // validate 默认根据 rules 校验表单内所有的数据，
    (this.$refs.formRef as any).validate(async (valid: any) => {
      if (!valid) return;
			//这里是其他代码。。。。
    });

  };

② 登录验证码倒计时

// 发送请求
  async getValidCode() {
    const url = `...`
    const res = await request.get(url);
    // 去判断字段中的 success 是否为 true，为 TRUE 代表成功
    if((res as any).data.success){
      this.$message.success('发送验证码成功');
    } else {
      this.$message.error('发送验证码失败，请稍后重试');
    }
  }

  // 点击获取验证码，调用此方法
  sendCode() {
    // 通过 valiField 方法，校验手机号，并抛出回调函数。
    // 回调函数指的是，api 内部有实现方法，但是给你开了口子去对内部实现方法进行修改。
    (this.$refs.formRef as any).validateField('phoneNumber', (errorMessage: any) => {
      if (!errorMessage) {
        // 1.时间开始倒数
        // 2.按钮进入禁用状态
        // 3.如果倒计时结束 按钮恢复可用状态 按钮文字变为重新发送, 时间重置
        // 4.倒计时的过程中 按钮文字为 多少s后重新发送
        const timer = setInterval(() => {
          this.form.time -= 1;
          this.form.btnText = `${this.form.time}s后重新发送`;
          this.form.disabled = true;
          if (this.form.time === 0) {
            this.form.disabled = false;
            this.form.btnText = '重新发送';
            this.form.time = 60;
            clearInterval(timer);
          }
        }, 1000);
        this.getValidCode();
      }
    });
  }