weixin_47925171 2021-07-10 12:26 采纳率: 25%
浏览 262
已采纳

Vue和JavaScript的登录页面，现在的问题就是无论验证码正不正确只要账号密码对了就能登录。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>系统登录 - 超市账单管理系统</title>
    <link rel="stylesheet" href="css/style.css"/>
    <script src="js/vue.js"></script>
    <script src="data.js"></script>
</head>
<body class="login_bg" onload="createCode()">
<section class="loginBox">
    <header class="loginHeader">
        <h1>超市账单管理系统</h1>
    </header>
    <section class="loginCont">
        <form class="loginForm" id="form" method="post" autocomplete="off">
            <div class="inputbox">
                <label for="user">用户名：</label>
                <input id="user" type="text" name="username"  v-model="user" placeholder="请输入用户名" required/>
            </div>
            <div class="inputbox">
                <label for="mima">密码：</label>
                <input id="mima" type="password" name="password" v-model="password" placeholder="请输入密码" required/>
            </div>
            <div class="inputbox">
                <label for="yzm">验证码：</label>
                <input type="text" id="yzm" name="yzm" placeholder="请输入验证码" style="width: 100px">
                <input type="text" onclick="createCode()" readonly="readonly" id="checkCode" class="unchanged" style="width: 80px;color: red" />
            </div>
            <div class="subBtn">
                <input type="button" value="登录" @click="login()" onclick="validate()"/>
                <input type="reset" value="重置"/>
            </div>
        </form>
    </section>
</section>
</body>
<script>
    new Vue({
        el:"#form",
        data:{
                user:"",
            password:"",
        },
        methods: {
            login() {
                let flag = false;
                //找到账号和密码与admin数组匹配
                //for循环循环数组
                for(let i = 0;i<admin.length;i++){
                    if(admin[i].user == this.user && admin[i].password == this.password){
                        flag = true;
                    }
                }
                if (flag) {
                    window.location.href="index.html"
                }else{
                    if(confirm("账号或密码错误，请重新登录")){
                        this.user = "";
                        this.password = "";
                    }
                }
            }
        },
    })

    let code; //在全局 定义验证码
    function createCode() {
        code = "";
        let codeLength = 4;//验证码的长度
        let checkCode = document.getElementById("checkCode");
        let selectChar = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9);//所有候选组成验证码的字符，当然也可以用中文的

        for (let i = 0; i < codeLength; i++) {
            let charIndex = Math.floor(Math.random() * 10);
            code += selectChar[charIndex];
        }
        //alert(code);
        if (checkCode) {
            checkCode.className = "code";
            checkCode.value = code;
        }
    }

    function validate() {
        let inputCode = document.getElementById("yzm").value;
        if (inputCode.length = 0) {
            alert("请输入验证码！");
        } else if (inputCode != code) {
            alert("验证码输入错误！");
            createCode();//刷新验证码
            return false;
            window.location.href="login.html"
        } else {
            alert("验证码正确，登录");
        }
    }
</script>
</html>
  • 写回答

3条回答 默认 最新

  • CSDN专家-showbo 2021-07-10 12:42
    关注

    data要增加验证码是否成功的数据，你的验证码控制和用户验证为2个不同的事件，用户名密码的事件验证成功就能通过就能进入系统。有帮助点个采纳，谢谢~

    
  vm=  new Vue({
        el: "#form",
        data: {
            user: "",
            password: "",
            codeOk: false////////用于标记验证码是否正确
        },
        methods: {
            login() {
                if (!this.codeOk) { alert('验证码错误！'); return }////////////////////////////
                let flag = false;
                //找到账号和密码与admin数组匹配
                //for循环循环数组
                for (let i = 0; i < admin.length; i++) {
                    if (admin[i].user == this.user && admin[i].password == this.password) {
                        flag = true;
                    }
                }
                if (flag) {
                    window.location.href = "index.html"
                } else {
                    if (confirm("账号或密码错误，请重新登录")) {
                        this.user = "";
                        this.password = "";
                    }
                }
            }
        },
    })
    let code; //在全局 定义验证码
    function createCode() {
        code = "";
        let codeLength = 4;//验证码的长度
        let checkCode = document.getElementById("checkCode");
        let selectChar = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9);//所有候选组成验证码的字符，当然也可以用中文的
        for (let i = 0; i < codeLength; i++) {
            let charIndex = Math.floor(Math.random() * 10);
            code += selectChar[charIndex];
        }
        //alert(code);
        if (checkCode) {
            checkCode.className = "code";
            checkCode.value = code;
        }
    }
    function validate() {
        let inputCode = document.getElementById("yzm").value;
        if (inputCode.length == 0) {
            alert("请输入验证码！");
        } else if (inputCode != code) {
            alert("验证码输入错误！");
            createCode();//刷新验证码
            return false;
            window.location.href = "login.html"
        } else {
            vm.codeOk = true;////////////////////////////////////////////设置验证成功标记
            alert("验证码正确，登录");
        }
    }
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

问题事件

  • 已采纳回答 7月10日
  • 创建了问题 7月10日