Vue + Elementui 實現登錄頁 手機驗證碼、倒計時等功能

Vue + Elementui 實現登錄頁 手機驗證碼、倒計時等功能

點擊打開視頻講解 更加詳細

<template>
  <div id="app">
    <div class="left">用代碼改變世界</div>
    <el-form
      class="content"
      ref="refForm"
      :rules="rules"
      :model="passwordResetForm"
      label-width="85px"
    >
      <el-form-item prop="accout" label="賬 號：">
        <el-input
          size="small"
          clearable
          v-model="passwordResetForm.accout"
          placeholder="輸入賬號"
          prefix-icon="el-icon-user"
        >
        </el-input>
      </el-form-item>
      <el-form-item prop="password" label="密 碼：">
        <el-input
          size="small"
          type="password"
          maxlength="16"
          clearable
          v-model="passwordResetForm.password"
          prefix-icon="el-icon-lock"
          placeholder="輸入密碼"
        ></el-input>
      </el-form-item>
      <el-form-item prop="checkCode" label="驗證碼：" class="checkCode">
        <el-input
          size="small"
          clearable
          v-model="passwordResetForm.checkCode"
          placeholder="輸入驗證碼"
        ></el-input>
        <el-button
          @click.stop="sendVerificationCode"
          size="mini"
          type="primary"
          style="margin-left: 10px"
          v-if="show"
          >發送驗證碼</el-button
        >
        <el-button
          size="mini"
          type="primary"
          style="margin-left: 10px"
          v-if="!show"
          disabled
          >{{ count }}秒後重發</el-button
        >
      </el-form-item>
      <div class="sign">
        <el-button @click.stop="sign" type="primary">登 錄</el-button>
      </div>
    </el-form>
    <div class="right">用歌曲祭奠青春</div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  name: "home",
  data() {
    return {
      passwordResetForm: {
        accout: "",
        password: "",
        checkCode: "",
      },
      rules: {
        accout: [{ required: true, message: "賬號不能為空", trigger: "blur" }],
        password: [
          { required: true, message: "密碼不能為空", trigger: "blur" },
          {
            trigger: "blur",
            validator: (rule, value, callback) => {
              let passwordreg =
                /(?=.*\d)(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,16}/;
              if (!passwordreg.test(value)) {
                callback(
                  new Error("密碼必須由數字、字母、特殊字元組合,請輸入8-16位")
                );
              } else {
                callback();
              }
            },
          },
        ],
        checkCode: [
          { required: true, message: "驗證碼不能為空", trigger: "blur" },
          { max: 4, message: "驗證碼為4位數字", trigger: "blur" },
        ],
      },
      show: true,
      count: "",
      timer: null,
    };
  },
  mounted() {},
  methods: {
    //驗證碼 倒計時
    sendVerificationCode() {
      let TIME_COUNT = 60;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.show = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
        this.getCode();
      }
    },
    //驗證碼
    getCode() {
      axios.get("/verificationCode.json").then((res) => {
        if (res.status == 200) {
          setTimeout(() => {
            this.passwordResetForm.checkCode = res.data.code;
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
          }, 3000);
        }
      });
    },
    //登錄
    sign() {
      this.$refs["refForm"].validate((valid) => {
        if (valid) {
          this.$message({
            type: "success",
            message: "登錄成功了哎！",
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style scoped>
#app {
  width: 100%;
  height: calc(100vh - 0px);
  background-image: url(../assets/moment.jpg);
  /* 設置圖片寬、高 */
  background-size: 100% 100%;
  /*按比例縮放*/
  background-repeat: no-repeat;
}
.content {
  width: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 22px 30px;
  box-shadow: 0 0 10px 5px #19a2d0 inset;
}
.checkCode ::v-deep .el-form-item__content {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
::v-deep .el-form-item__label {
  font-size: 18px;
  font-weight: bold;
  padding: 0 0 0 0;
  color: #fff;
  text-align: left;
}
.sign > button {
  width: 100%;
  font-size: 18px;
}
.left {
  width: 10px;
  font-size: 40px;
  font-weight: bold;
  color: #fff;
  position: absolute;
  top: 50%;
  left: 25%;
  transform: translate(-50%, -50%);
}
.right {
  width: 10px;
  font-size: 40px;
  font-weight: bold;
  color: #fff;
  position: absolute;
  top: 50%;
  left: 75%;
  transform: translate(-50%, -50%);
}
</style>

效果圖：

若對您有幫助，請點擊跳轉到B站一鍵三連哦！感謝支持！！！