获取验证码的JS代码

最新推荐文章于 2022-08-19 15:44:34 发布

@二十六

最新推荐文章于 2022-08-19 15:44:34 发布

阅读量1.7k

点赞数

分类专栏： JavaScript复习

本文链接：https://blog.csdn.net/qq_44212319/article/details/103897204

版权

JavaScript复习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

获取验证码的JS代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>找回密码</title>
    <style>
		*{
		    margin: 0;
		    padding: 0;
		}
		body{
		    background-color: #f5f5f5;
		}
		#app{
		    width: 100vw;
		    height: 100vh;
		    display: flex;
		    align-items: center;
		    justify-content: center;
		}
		.container{
		    width: 100vw;
		    height: 600px;
		    display: flex;
		    flex-direction: column;
		    align-items: center;
		    background-color: white;
		}
		.topBar{
		    display: flex;
		    flex-direction: column;
		    align-items: center;
		    justify-content: center;
		    margin-top: 10px;
		}
		.title{
		    font-size: 14px;
		    color: #999999;
		    margin-top: 16px;
		}
		.inputBox{
		    margin: 0 auto;
		    list-style: none;
		}
		.inputBox > li{
		    height: 60px;
		    margin: 10px 0;
		}
		.inputBox > li:first-child{
		    margin-top: 0;
		}
		.itemTitle{
		    width: 100px;
		    font-size: 13px;
		    font-weight: 600;
		    color: #646464;
		    margin: 10px 0;
		}
		.inputBox > li > input{
		    width: 600px;
		    padding: 6px 12px;
		    outline: none;
		}
		.check{
		    width: 720px;
		    display: flex;
		    justify-content: space-between;
		}
		.check > input{
		    width: 600px;
		    padding: 6px 12px;
		    outline: none;
		}
		.getCheckNum{
		    width: 80px;
		    height: 36px;
		    border: none;
		    outline: none;
		    background-color: #5c90d2;
		    border: 1px solid #3675c5;
		    font-size: 14px;
		    font-weight: 600;
		    color: white;
		    line-height: 36px;
		    text-align: center;
		}
		.getCheckNum:hover{
		    background-color: #5184c7;
		    cursor: pointer;
		}
		.submitBtn{
		    width: 100px;
		    height: 38px;
		    border: none;
		    outline: none;
		    background-color: #5c90d2;
		    border: 1px solid #3675c5;
		    font-size: 14px;
		    font-weight: 600;
		    color: white;
		    margin-top: 25px;
		}
		.submitBtn:hover{
		    background-color: #5184c7;
		    cursor: pointer;
		}
		[v-cloak]{
		    display: none;
		}
	</style>
</head>
<body>
    <div id="app">
        <div class="container">
            <div class="topBar">
                <img src="./logo.png" alt="">
                <p class="title">海豚PHP框架</p>
            </div>
            
            <ul class="inputBox">
                <li>
                    <p class="itemTitle">用户名：</p>
                    <input type="text" placeholder="请输入您的用户名" v-model="userName">
                </li>
                <li>
                    <p class="itemTitle">手机号：</p>
                    <input type="text" placeholder="请输入您的手机号" v-model="phoneNum">
                </li>
                <li>
                    <p class="itemTitle">验证码：</p>
                    <div class="check">
                        <input type="text" placeholder="请输入验证码" v-model="checkNum">
                        <button class="getCheckNum" v-bind:disabled="disabled" v-cloak @click="getCheckCode">{{ countDown }}</button>
                    </div>
                </li>
                <li>
                    <p class="itemTitle">新密码：</p>
                    <input type="password" placeholder="请输入您的密码" v-model="newPwd">
                </li>
                <li>
                    <p class="itemTitle">确认新密码：</p>
                    <input type="password" placeholder="请输入您的密码" v-model="repeatPwd">
                </li>
            </ul>
            <button class="submitBtn" @click="submitFun">提交</button>
        </div>
    </div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="./md5.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            countDown: '获取验证码',
            disabled: false,
            userName:"", // 用户名
            phoneNum:"", // 手机号码
            checkNum:"", // 验证码
            newPwd:"", // 新密码
            repeatPwd:"", // 重复新密码
        },
        methods: {
            // 获取验证码函数
            getCheckCode:function(){
                this.disabled = true;
                var num = 59;
                this.countDown = 60;
                var that = this;
                var timer = setInterval(function(){
                    that.countDown = num--;
                    if(that.countDown == 0){
                        that.countDown = "发送验证码";
                        that.disabled = false;
                        clearInterval(timer);
                    }
                }, 1000);
            },

            // 提交函数
            submitFun: function () {
                // 验证相关信息是否为空
                switch ("") {
                    case this.userName:
                        alert("用户名不能为空");
                        break;
                    case this.phoneNum:
                        alert("手机号不能为空");
                        break;
                    case this.checkNum:
                        alert("验证码不能为空");
                        break;
                    case this.newPwd:
                        alert("密码不能为空");
                        break;
                    case this.repeatPwd:
                        alert("密码不能为空");
                        break;
                }
                // 验证两次输入的密码是否一致
                if (this.newPwd != this.repeatPwd) {
                    alert("两次输入的密码不一致，请重新输入");
                    this.userName = this.phoneNum = this.checkNum = this.newPwd = this.repeatPwd = "";
                    return false
                }
            },
        },
    });
</script>
</html>

代码如上，这里最主要的是使用表单元素的disabled属性，当disabled属性为false时，此时的表单元素可以被使用，当disabled属性为true时，则表单为禁用状态。
当用户点击获取验证码按钮时，立即改变button表单元素的disabled属性，使button按钮不能被点击，这一步很重要，因为如果不禁止button的disabled属性，那么用户多次点击，就会开启多个定时器，获取验证码就会出现时间跳动很快的情况。当60秒时间过完之后，再设置disabled属性使button可以被使用。