Vue + Elementui 實作登錄頁 手機驗證碼、倒計時等功能
點擊打開視頻講解 更加詳細
<template>
<div id="app">
<div >用代碼改變世界</div>
<el-form
ref="refForm"
:rules="rules"
:model="passwordResetForm"
label-
>
<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="驗證碼：" >
<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 >
<el-button @click.stop="sign" type="primary">登 錄</el-button>
</div>
</el-form>
<div >用歌曲祭奠青春</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站一鍵三連哦！感謝支持！！！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/503299.html
標籤：其他