纯前端实现登录页面(表单通过正则判断，实现验证码功能以及简单的登录和重置功能)

页面效果如下：

代码分享：

HTML代码：

    
    
    
    
    
    



    


        
登录系统

        

            账号：
        
        

            密码：
        
        

            验证码：
            
        

        

             
            
        
        

            
前往首页 前往注册
        
    

CSS代码：

* {
    margin: 0px;
    padding: 0px;
}

html,
body {
    height: 100%;
    overflow: hidden;
}

body {
    background: url("../image/2020.jpg") no-repeat;
    background-size: 100% 100%;
    position: relative;
}

.background {
    width: 400px;
    height: 400px;
    margin-top: 120px;
    margin-left: 100px;
    background-color: rgba(102, 102, 102, 0.8);
    border-radius: 20px;
    position: relative;
}

.head {
    width: 100%;
    height: 50px;
    line-height: 50px;
    color: white;
    font-size: 28px;
    margin-top: 20px;
    text-align: center;
    position: absolute;
}

.zhanghao {
    width: 100%;
    height: 40px;
    color: white;
    font-size: 18px;
    text-align: center;
    margin-top: 100px;
    position: absolute;
}

.zhanghao input {
    height: 25px;
    outline: none;
}

.mima {
    width: 100%;
    height: 40px;
    color: white;
    font-size: 18px;
    text-align: center;
    margin-top: 160px;
    position: absolute;
}

.mima input {
    height: 25px;
    outline: none;
}

.yanzhengma {
    width: 100%;
    height: 40px;
    color: white;
    font-size: 18px;
    text-indent: 75px;
    margin-top: 220px;
    position: absolute;
}

#input {
    width: 50px;
    height: 25px;
    outline: none;
}

#code {
    width: 80px;
    height: 30px;
    font-size: 20px;
    font-family: Arial;
    font-style: italic;
    font-weight: bold;
    letter-spacing: 2px;
    color: blue;
    border: 0;
    background-color: white;
}

.btn {
    width: 100%;
    height: 40px;
    color: white;
    font-size: 18px;
    text-indent: 85px;
    margin-top: 280px;
    position: absolute;
}

.btn2 {
    width: 100%;
    height: 40px;
    line-height: 40px;
    color: white;
    font-size: 18px;
    text-align: center;
    margin-top: 340px;
    position: absolute;
}

.returnSenLia {
    text-decoration: none;
    color: white;
}

.zhucea {
    text-decoration: none;
    color: red;
}

.denglu {
    width: 100px;
    height: 40px;
    color: white;
    font-size: 18px;
    background-color: red;
    border-radius: 10px;
    border: 0px;
    outline: none;
}

JS代码：

window.onload = function() {
    //验证码
    var code = document.getElementById("code");
    //刷新验证码
    function change() {
        // 验证码组成库
        var 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 = '';
        // 随机从数组中获取四个元素组成验证码
        for (var i = 0; i < 4; i++) {
            // 随机获取一个数组的下标
            var r = parseInt(Math.random() * arrays.length);
            codes += arrays[r];
        }
        // 验证码添加到input里
        code.value = codes;
    }


    //加载显示在页面上
    change();
    //单击更换验证码
    code.onclick = change;

    //单击验证
    var account = document.getElementById("account");
    var adminPswd = document.getElementById("adminPswd");
    var check = document.getElementById("check");
    var chongzhi = document.getElementById("chongzhi");
    var input = document.getElementById("input");



    //验证码验证
    check.onclick = function() {
        var inputCode = input.value.toUpperCase(); //取得输入的验证码并转化为大写
        var zjlaccount = account.value;
        var zjladminPswd = adminPswd.value;
        if (zjlaccount.length == 0) { //若输入的账号长度为0
            alert("请输入账号！"); //则弹出请输入账号
        } else if (zjladminPswd.length == 0) { //若输入的密码长度为0
            alert("请输入密码！"); //则弹出请输入密码
        } else if (inputCode.length == 0) { //若输入的验证码长度为0
            alert("请输入验证码！"); //则弹出请输入验证码
        } else {
            if (inputCode != codes.toUpperCase()) { //若输入的验证码与产生的验证码不一致时
                alert("验证码输入错误！请重新输入"); //则弹出验证码输入错误
                change(); //刷新验证码
                input.value = ""; //清空文本框
            } else if (zjlaccount != "zcy" || zjladminPswd != "zcyzcy") {

                alert("账号或密码错误！");

            } else {

                alert("登录成功！");
                window.location.href = "Oneself.html";
            }

        }



    }

    //重置
    //清空所有登录信息
    //验证码刷新
    chongzhi.onclick = function() {
        change(); //刷新验证码
        input.value = ""; //清空文本框
        account.value = "";
        adminPswd.value = "";
    }

}