vue.js + element ui 纯前端登录页面带验证码

vue.js + element ui 纯前端登录页面带验证码

        <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
            <div class="title-container">
                <h3 class="title">登录</h3>
            </div>
        
            <el-form-item prop="username">
                <span class="svg-container">
                    <i class="el-icon-user"></i>
                </span>
                <el-input ref="username" v-model="loginForm.username" placeholder="用户名" name="username" type="text" tabindex="1" auto-complete="on" />
            </el-form-item>
        
            <el-form-item prop="password">
                <span class="svg-container">
                    <i class="el-icon-lock"></i>
                </span>
                <el-input :key="passwordType" ref="password" v-model="loginForm.password" :type="passwordType" placeholder="密码" name="password" tabindex="2" auto-complete="on" @keyup.enter.native="handleLogin" />
                <span class="show-pwd" @click="showPwd">
                    <i class="el-icon-view"></i>
                </span>
            </el-form-item>

            <el-form-item prop="yanzhengma" style="width: 40%;float: left;">
                <el-input ref="yanzhengma" v-model="loginForm.yanzhengma" placeholder="请输入验证码" name="yanzhengma" type="text" tabindex="1" auto-complete="on"/>
            </el-form-item>

            <el-form-item style="width: 36%;float: right;" class="codeForm">
                <input type="button" :value="codes" id="code" title="看不清,下一张" @click="handleCode"/>
            </el-form-item>

            <div>
                <el-button type="primary" style="width:100%;margin-bottom:20px;" @click.native.prevent="handleLogin">登录</el-button>
            </div>
     
        </el-form>
      </div>
</div>

/* .login-container {
min-height: 100%;
width: 100%;
overflow: hidden;
background: url(./image/e90664acbb424877adfaa40ca21cd35b.jpeg);
background-size: 100% 100%;
} */
.login-container .avatar-box {
margin: 0 auto;
width: 120px;
height: 120px;
border-radius: 50%;
border: 1px solid #409eff;
box-shadow: 0 0 10px #409eff;
position: relative;
bottom: 20px;
}
.login-container .avatar-box img {
width: 100%;
height: 100%;
border-radius: 50%;
}

.login-form {
position: relative;
width: 520px;
max-width: 100%;
padding: 160px 35px 0;
margin: 0 auto;
overflow: hidden;

}

.tips {
font-size: 18px;
text-align: center;
color: #000;
margin-bottom: 10px;
}

.svg-container {
padding: 6px 5px 6px 15px;
color: #889aa4;
vertical-align: middle;
width: 21px;
display: inline-block;
}

.title-container {
position: relative;
}
.title-container .title {
font-size: 30px;
color: #eee;
margin: 0px auto 40px auto;
text-align: center;
font-weight: 500;
}
.show-pwd {
position: absolute;
right: 10px;
top: 7px;
font-size: 16px;
color: #889aa4;
cursor: pointer;
user-select: none;
}
#code{
padding: 8px 5px 12px 15px;
font-size: 20px;
font-family: Arial;
font-style: italic;
font-weight: bold;
letter-spacing: 2px;
color: blue;
border: 0;
background-color: white;
}
.login-container .codeForm input{
width: 100%;
}

var app = new Vue({ el: '#app', data() { const validateUsername = (rule, value, callback) => { if (!validUsername(value)) { callback(new Error('用户名不能为空！')) } else { callback() } } const validatePassword = (rule, value, callback) => { if (value.length < 6) { callback(new Error('密码最少为6位字符！')) } else { callback() } } return { loginForm: { username: '', password: '', yanzhengma:'' }, // 登录规则 loginRules: { username: [{ required: true, trigger: 'blur', validator: validateUsername }], password: [{ required: true, trigger: 'blur', validator: validatePassword }] }, loading: false, passwordType: 'password', redirect: undefined, arrays:new Array( '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'j', 'k', 'm', 'n', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z' ), codes:'' 验证码组成库 } }, methods: {

        // 验证码
        handleCode(){
            debugger;
            // 重新初始化验证码
            this.codes = '';
            // 随机从数组中获取四个元素组成验证码
            for (var i = 0; i < 4; i++) {
                // 随机获取一个数组的下标
                var r = parseInt(Math.random() * this.arrays.length);
                this.codes += this.arrays[r];
            }
        },
        showPwd() {
            if (this.passwordType === 'password') {
                this.passwordType = ''
            } else {
                this.passwordType = 'password'
            }
            // this.$nextTick(() => {
            //     this.$refs.password.focus()
            // })
        },
        // 登录业务
        handleLogin() {
            if (this.loginForm.username.length == 0) { //若输入的账号长度为0
                alert("请输入账号！"); //则弹出请输入账号
            } else if (this.loginForm.password.length == 0) { //若输入的密码长度为0
                alert("请输入密码！"); //则弹出请输入密码
            } else if (this.loginForm.yanzhengma.length == 0) { //若输入的验证码长度为0
                alert("请输入验证码！"); //则弹出请输入验证码
            } else {
                console.log(this.codes.toUpperCase())
                if (this.loginForm.yanzhengma.toUpperCase() != this.codes.toUpperCase()) { //若输入的验证码与产生的验证码不一致时
                    alert("验证码输入错误！请重新输入"); //则弹出验证码输入错误
                    this.handleCode(); //刷新验证码
                    this.loginForm.yanzhengma = '';
                } else if (this.loginForm.username != "admin" || this.loginForm.password != "123456") {
                    alert("账号或密码错误！");
                } else {
                    alert("登录成功！");
                    window.location.href = "homePage.html";
                }
    
            }
        },
    },
    mounted(){
        this.handleCode()
    }
})