vue实现验证码项目

最新推荐文章于 2025-05-29 14:53:53 发布
Lubin_9527
最新推荐文章于 2025-05-29 14:53:53 发布
阅读量1.2k
点赞数
CC 4.0 BY-SA版权
本文链接：https://blog.youkuaiyun.com/Lubin_9527/article/details/82795441
本文介绍如何在Vue.js项目中实现验证码功能，包括关键步骤和代码示例。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
vue实现验证码功能

在这里插入<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table {width: 100%; border-collapse: collapse;}
        tr:last-child,tr:first-child { border-top: orange 2px solid; }
        td {padding: 10px;}
        td:last-child { color: red; width:250px;}
        td:first-child { width:300px;}
        [v-cloak]{display: none;}

        .lv1{display:block;background:red;height:6px;width:40px;}
        .lv2{display:block;background:orange;height:6px;width:80px;}
        .lv3{display:block;background:green;height:6px;width:120px;}
    </style>
</head>
<body>
<form action="aaa" id="app" v-cloak @submit="checkAll">
<table>
    <tbody>
    <tr>
        <td>用户名</td>
        <td><input type="text" name="username" v-model="username" @blur="checkUsername"></td>
        <td>{{usernameMsg}}</td>
    </tr>
    <tr>
        <td>密码</td>
        <td><input type="test" name="password" v-model="password" @keyup="checkPassword"></td>
        <td>{{passwordMsg}}<span :class="passwordClass"></span></td>
    </tr>
    <tr>
        <td><input type="button" :value="sendCodeValue" @click="sendCode" :disabled="sendCodeDisable"></td>
        <td><input type="text" name="code" v-model="code" @blur="checkCode"></td>
        <td>{{codeMsg}}</td>
    </tr>
    <tr>
        <td colspan="2"><input type="checkbox" v-model="agree">同意"服务条款"和"隐私权相关政策"</td>
        <td>{{agreeMsg}}</td>
    </tr>
    <tr>
        <td colspan="3"><input type="submit" value="立刻注册"></td>
    </tr>
    </tbody>
</table>
</form>
<script src="../js/vue.js"></script>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            username:"", /*用户名的值*/
            password:"", /*密码的值*/
            code:"",     /*验证码的值*/
            agree:false,
            usernameMsg:"", /*用户名的错误提示*/
            passwordMsg:"",
            passwordClass:"", /*密码的强度样式*/
            sendCodeDisable: false, /*是否禁用[获取短信验证码]按钮*/
            sendCodeValue: "获取短信验证码", /*[获取短信验证码]按钮上的文字*/
            validCode:"", /*合法的短信验证码值*/
            codeMsg:"",  /*短信验证码的错误提示*/
            agreeMsg:"",
            n: 10
        },
        methods:{
            checkUsername: function() {
                if(!/^.{2,}$/.test(this.username)){
                    this.usernameMsg="用户名长度必须至少2个字符";
                    return false;
                }else{
                    this.usernameMsg="";
                    return true;
                }
            },
            checkPassword: function() {
                if(this.password.length>0) {
                    var p = this.password;
                    console.log(p)
                    var numberReg = /\d+/;
                    var charReg = /[a-zA-Z]+/;
                    var specReg = /[^0-9a-zA-Z]+/;
                    var n = 0;
                    if(numberReg.test(p)){
                        n++;
                    }
                    if(charReg.test(p)){
                        n++;
                    }
                    if(specReg.test(p)){
                        n++;
                    }
                    if(n == 3 && p.length>=6) {
                        this.passwordClass="lv3";
                    } else if(n == 2 && p.length>=6) {
                        this.passwordClass="lv2";
                    } else {
                        this.passwordClass="lv1";
                    }
                    this.passwordMsg="";
                    return true;
                } else {
                    this.passwordMsg="密码不能为空";
                    return false;
                }
            },
            sendCode: function() {
                this.validCode = this.randomCode();
                console.log("随机验证码是："+ this.validCode);
                this.sendCodeDisable = true;
                this.sendCodeEnable();
            },
            sendCodeEnable: function() {
                if(this.n > 0) {
                    this.sendCodeValue="在"+this.n+"秒后重新获取";
                    setTimeout(this.sendCodeEnable, 1000);
                    this.n--;
                } else {
                    this.sendCodeValue = "获取短信验证码";
                    this.sendCodeDisable = false;
                    this.n =10;
                }
            },
            randomCode: function() {
                var array = [0,1,2,3,4,5,6,7,8,9];
                var str = "";
                for(var i = 0; i < 6; i++) {
                    str += Math.floor(Math.random()*10);
                }
                return str;
            },
            checkCode: function() {
                if(this.code != this.validCode) {
                    this.codeMsg = "短信验证码不匹配";
                    return false;
                } else {
                    this.codeMsg = "";
                    return true;
                }
            },
            checkAgree: function() {
                if(this.agree) {
                    this.agreeMsg = "";
                    return true;
                } else {
                    this.agreeMsg = "必须同意";
                    return false;
                }
            },
            checkAll: function(e) {

                if(this.checkUsername() & this.checkPassword() & this.checkCode() & this.checkAgree()) {

                } else {
                    e.preventDefault();
                }
            }

        }
    });
</script>
</body>
</html>