先看看实现效果图
拥有邮箱验证功能，发送验证码效果，但是需要连接后台，有兴趣的同学可以尝试一下
直接上代码了:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no,minimal-ui">
<title>菩提阁</title>
<link rel="icon" href="./../images/favico.ico">
<!--不同屏幕尺寸根字体设置-->
<!-- <script src="./../js/base.js"></script> -->
<!--element-ui的样式-->
<link rel="stylesheet" href="../../backend/plugins/element-ui/index.css"/>
<!--引入vant样式-->
<link rel="stylesheet" href="../styles/vant.min.css"/>
<!-- 引入样式 -->
<link rel="stylesheet" href="../styles/index.css"/>
<!--本页面内容的样式-->
<link rel="stylesheet" href="./../styles/login.css"/>
</head>
<body>
<div id="login" v-loading="loading">
<div class="divContainer">
<div class="logins">登录</div>
<div class="verificationcode">
<el-input placeholder=" 请输入邮箱" v-model="form.phone" maxlength='20'/>
</el-input>
<span v-if="second > 0">{
{second}}s</span>
<span v-if="second <= 0" @click='getCode'>获取验证码</span>
</div>
<div class="divSplit"></div>
<el-input placeholder=" 请输入验证码" v-model="form.code" maxlength='20'/>
</el-input>
</div>
<div class="divContainerright">
<div class="frend">你好朋友</div>
</div>
<div class="divContainerbottom">
<div class="divMsg" v-if="msgFlag">邮箱格式不正确，请重新输入</div>
<el-button type="primary" style="color: #000 !important;" :class="{btnSubmit:1===1,btnNoPhone:!form.phone,btnPhone:form.phone}" @click="btnLogin">
登录
</el-button>
</div>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../backend/plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../backend/plugins/element-ui/index.js"></script>
<!-- 引入vant样式 -->
<script src="./../js/vant.min.js"></script>
<!-- 引入axios -->
<script src="../../backend/plugins/axios/axios.min.js"></script>
<script src="./../js/request.js"></script>
<script src="./../api/login.js"></script>
</body>
<script>
new Vue({
el: "#login",
data() {
return {
form: {
phone: '',
code: ''
},
// 倒计时
second: -1,
// 判断邮箱格式
msgFlag: false,
// 是否登陆中
loading: false,
// 是否可以发送验证码
sending: true,
// 倒计时定时任务引用 关闭登录层清除定时任务
clearSmsTime: null
}
},
computed: {},
created() {
},
mounted() {
},
methods: {
getCode() {
this.form.code = ''
// 手机号验证
// const regex = /^(13[0-9]{9})|(15[0-9]{9})|(17[0-9]{9})|(18[0-9]{9})|(19[0-9]{9})$/;
// 改为邮箱验证
const regex = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
if (regex.test(this.form.phone)) {
this.msgFlag = false
//this.form.code = (Math.random()*1000000).toFixed(0)
sendMsgApi({phone: this.form.phone})
// 不可重复发送验证码
this.sending = false
// 倒计时效果
this.timeDown()
} else {
this.msgFlag = true
}
},
// 倒计时
timeDown() {
if (this.clearSmsTime) {
clearInterval(this.clearSmsTime)
}
this.second = 60
this.clearSmsTime = setInterval(() => {
--this.second
if (this.second < 1) {
clearInterval(this.clearSmsTime)
// 可以重新发送验证码
this.sending = true
this.second = 0
}
}, 1000)
},
async btnLogin() {
if (this.form.phone && this.form.code) {
this.loading = true
const res = await loginApi(this.form)
this.loading = false
if (res.code === 1) {
sessionStorage.setItem("userPhone", this.form.phone)
window.requestAnimationFrame(() => {
window.location.href = '/front/index.html'
})
} else {
this.$notify({type: 'warning', message: res.msg});
}
} else {
this.$notify({type: 'warning', message: '请输入邮箱账号'});
}
}
}
})
</script>
</html>css:
html,body{
height: 100%;
background-image: url(../images/bgc.jpg);
background-repeat: no-repeat;
background-size: cover;
}
#login{
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 768px;
height: 480px;
/* background-color: #fff; */
border-radius: 10px;
}
#login .divHead {
opacity: 1;
background: #333333;
height: 88px;
width: 100%;
font-size: 18px;
font-family: PingFangSC, PingFangSC-Regular;
font-weight: 500;
text-align: center;
color: #ffffff;
line-height: 88px;
}
.logins{
font-size: 30px;
font-weight: 800;
text-align: center;
margin-top: 25%;
}
#login .divContainer {
width: 384px;
height: 480px;
opacity: 1;
background: #ffffff;
border-radius: 6px;
/* margin: 0 auto; */
/* margin-top: 10px; */
position: relative;
float: left;
}
.divContainerright{
width: 384px;
height: 480px;
background-color: #FF416C;
float: left;
border-radius: 10px;
position: relative;
}
.divContainerright .frend{
position: absolute;
left: 50%;
top: 45%;
transform: translate(-50%,-50%);
font-size: 2em;
font-family: "宋体";
color: #fff;
}
.divContainerbottom{
position: absolute;
top: 50%;
left: 0;
}
.verificationcode{
position: relative;
}
#login .divContainer input {
border: 0;
height: 63px;
}
#login .divContainer .divSplit {
height: 1px;
background-color: #efefef;
border: 0;
margin-left: 10px;
margin-right: 10px;
}
#login .divContainer span {
position: absolute;
right: 20px;
top: 20px;
cursor: pointer;
opacity: 1;
font-size: 12px;
font-family: PingFangSC, PingFangSC-Regular;
font-weight: 400;
text-align: left;
color: #ffc200;
letter-spacing: 0px;
}
#login .divMsg {
width: 168px;
height: 17px;
opacity: 1;
font-size: 12px;
font-family: PingFangSC, PingFangSC-Regular;
font-weight: 400;
text-align: center;
color: #e94e3c;
line-height: 17px;
margin-left: 26px;
margin-top: 10px;
}
#login .btnSubmit {
width: 356px;
height: 40px;
margin: 20px 10px 0 10px;
border-radius: 20px;
border: 0;
font-size: 15px;
font-family: PingFangSC, PingFangSC-Regular;
font-weight: 500;
text-align: center;
}
#login .btnNoPhone {
color: #666666;
background: #d8d8d8;
}
#login .btnNoPhone:active {
background: #afafaf;
}
#login .btnPhone {
background: #ffc200;
color: #333333;
}
#login .btnPhone:active {
background: rgba(255, 142, 0, 1);
color: #333333;
}