前序

**相信有很多的人在刚刚做项目的实现，登录与注册功能的实现是基本的要求，要是刚刚开始写的小伙伴肯定会有很多的困惑，这里我介绍一下自己的写法，希望能帮到你，也希望能免费点个小

这里就以之前我写的一个为例，大家可以根据自己的规则来更改

一 .登录

基本流程：

登录的 html

<!DOCTYPE html>
<html lang="en">
<body>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="denglu.css" />
        <script src="jquery-3.6.0.min.js"></script>
        <script src="denglu.js"></script>
        <link rel="shortcut icon" href="../img/防疫01.webp" type="image/x-icon" />
    <title>登录界面</title>
    </head>
    <body onload="change();">
        /**
        <video id="v1" autoplay muted loop="true" style="width: 100%">
            <!--autoplay自动播放 muted使其静音 loop循环播放-->
            <source src="../vdeo/抗疫.wmv">
        </video>
        */
        <audio id='audio' src="../mp3/GONTITI - 朝 (早晨).m4a"></audio>
        <div id="zg">
            <div id="logindiv">
                <h2 id="title" class="user">账 号 登 录</h2>
                <div>
                // onblur ==》为对象失去焦点时触发
                    <input type="text" id="username" placeholder="用户名" onblur="checkname();" />
                    <div id="cw"></div>
                </div>
                <div>
                    <input type="password" id="password" placeholder="密码" onblur="checkpass();" />
                    <div id="cw1"></div>
                </div>
                <div>
                    <input type="text" id="vcode" placeholder="验证码" onblur="check();" />
                    <span id="code" onclick="change()"></span>
                    <div id="cw2"></div>
                </div>
                <div id="pro">
                    <!-- <span id="lo"><input type="checkbox" />一周内免登录</span> -->
                    <a href="zhuce.html" id="zc">免费注册</a>
                </div>
 // onclick ==》最常用的点击触发事件
                <div id="btlogin"><input type="button" value="登录" onclick="checkall();" /></div>
            </div>
        </div>
        </div>
    </body>
    </html>
</body>
</html>

图片展示

这里只是我们实现了静态的页面，接下来我们要实现的是用户名与密码以及验证码的校验并完成button按钮提交的具体实现功能，在校验的部分就需要加入正则表达式来对用户输入的内容进行一个限制，直接上代码

登录的js代码

function checkname() {
    var name = document.getElementById("username").value;
    var reg = /^[\u4e00-\u9fa5a-zA-Z]{2,4}$/;
    if (name == '') {
        document.getElementById("cw").className = "wrong";
        document.getElementById("cw").innerText = "用户名不能为空!";
        return false;
    } else {
        document.getElementById("cw").innerText = " ";
        return true;
    }
}
function checkpass() {
    var pass = document.getElementById("password").value;
    var reg = /^[0-9a-zA-Z]{6,12}$/;
    if (pass == '') {
        document.getElementById("cw1").className = "wrong";
        document.getElementById("cw1").innerText = "密码不能为空!";
        return false;
    }
    else {
        if (reg.test(pass)) {
            document.getElementById("cw1").innerText = " ";
            return true;
        } else {
            document.getElementById("cw1").className = "wrong";
            document.getElementById("cw1").innerText = "密码长度为6—12位";
            return false;
        }
    }
}

这里还有一个就是验证码功能的实现，其实在登录部分不需要这个也可以，看个人需求吧

var code;
function change() {
    var arrays = new Array(
        '1', '2', '3', '4', '5', '6', '7', '8', '9', '0',
        'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j',
        'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't',
        'u', 'v', 'w', 'x', 'y', 'z',
        'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J',
        'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T',
        'U', 'V', 'W', 'X', 'Y', 'Z');
    code = '';
    for (var i = 0; i < 4; i++) {
        var r = parseInt(Math.random() * arrays.length);
        code += arrays[r];
    }
    document.getElementById("code").innerHTML = code;
}
function check() {
    var icode = document.getElementById("vcode").value;
    if (icode == '') {
        document.getElementById("cw2").className = "wrong";
        document.getElementById("cw2").innerText = "验证码不能为空!";
        return false;
    }
    else {
        if (icode != code) {
            document.getElementById("cw2").className = "wrong";
            document.getElementById("cw2").innerText = "请输入正确的验证码";
            return false;
        } else {
            document.getElementById("cw2").innerText = " ";
            return true;
        }
    }
}

这里说明一下这个验证码的实现思路，是通过‘.0-9’,‘a-z’,'A-Z’的组成的数组，再通过Math.random() * arrays.length来找到随机且不超范围的数组下标，4次循环每次拿到一个字符并数组验证码

最后就是一个提交的校验实现，我这里提交只是一个静态页面的跳转，因为前面的校验函数我是设置为一个Boolean类型函数，再提交的时候就判断前面是否返回为ture就行了

function checkall() {
    var now = new Date();
    var hour = now.getHours();
    var minute = now.getMinutes();
    var second = now.getSeconds();
    var week = now.getDay();
    var a = ['日', '一', '二', '三', '四', '五', '六'];
    var str = "现在是：" + hour + ":" + minute + ":" + second + ",星期" + a[week];
    if (checkname() == true && checkpass() == true && check() == true) {
        alert(str + "，登录成功！");
        location.href = "zhuce.html";
    } else {
        alert("登录失败！");
        return false;
    }
}
/**function musicAutoPlay() {
    let music = document.getElementById('audio')
    if (music.paused) {
        music.play()
    }
}
*/

ok,成功!

如果想实现的是传入后端的话，最好的话还是在提交函数里面嵌入Ajax发送打包的数据，我这里就简单的介绍一下

ajax

没有配合使用jquery的时候

配合使用jquery的时候，这也是目前比较常用的一种方式

二. 注册的实现

基本的流程：

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="../img/防疫01.webp" type="image/x-icon" />
    <title>注册界面</title>
</head>
<body>
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="zhuce.css" />
        <script src="../js/jquery.min.js"></script>
        <script src="zhucehunx.js"></script>
    </head>
    <!--全局采用的是点击触发事件-->
    <body onload="change();">
       // <audio id='audio' src="../mp3/轻音乐.m4a" />
        <div id="zg">
            <div id="logindiv">
                <h2 id="title" class="user">账 号 注 册</h2>
                <div>
                    <input type="text" id="username" placeholder="用户名" onblur="checkname();" />
                    <div id="cw"></div>
                </div>
                <div>
                    <input type="password" id="password1" placeholder="密码" onblur="checkpass1();" />
                    <div id="cw1"></div>
                </div>
                <div>
                    <input type="password" id="password2" placeholder="再次输入密码" onblur="checkpass2();" />
                    <div id="cw2"></div>
                </div>
                <!--                 
                <div>
                    <input type="text" id="enmail" placeholder="输入邮箱" onblur="checkpassenmail();" />
                    <div id="cw3"></div> -->
                <!-- </div-->
                <!-- <input type="text" id="email" placeholder="输入邮箱" noblur="emailTest()">
                <input type="button" value="验证邮箱" id=button>
                <p>
                <div id=emailError></div> -->
                <input type="text" id="email" placeholder="输入邮箱">
                <input type="button" value="验证邮箱" id=button onclick="fun()">
                <p>
                <div id=emailError></div>
                <div>
                    <input type="text" id="vcode" placeholder="验证码" onblur="check();" />
                    <span id="code" onclick="change()"></span>
                    <div id="cw4"></div>
                </div>
                <div id="btlogin"><input type="button" value="注 册" onclick="checkall();" /></div>
            </div>
        </div>
        </div>
    </body>
    </html>
</body>
</html>

function check() {
    var icode = document.getElementById("vcode").value;
    if (icode == '') {
        document.getElementById("cw4").className = "wrong";
        document.getElementById("cw4").innerText = "验证码不能为空!";
        return false;
    }
    else {
        if (icode != code) {
            document.getElementById("cw4").className = "wrong";
            document.getElementById("cw4").innerText = "请输入正确的验证码";
            return false;
        } else {
            document.getElementById("cw4").innerText = " ";
            return true;
        }
    }
}
function checkname() {
    var name = document.getElementById("username").value;
    // var reg = /^[\u4e00-\u9fa5a-zA-Z]{2,4}$/;
    if (name == '') {
        document.getElementById("cw").className = "wrong";
        document.getElementById("cw").innerText = "用户名不能为空!";
        return false;
    } else {
        // if (reg.test(name)) {
        document.getElementById("cw").innerText = " ";
        return true;
    }
}
function checkpass1() {
    var pass = document.getElementById("password1").value;
    var reg = /^[0-9a-zA-Z]{6,12}$/;
    if (pass == '') {
        document.getElementById("cw1").className = "wrong";
        document.getElementById("cw1").innerText = "密码不能为空!";
        return false;
    }
    else {
        if (reg.test(pass)) {
            document.getElementById("cw1").innerText = " ";
            return true;
        } else {
            document.getElementById("cw1").className = "wrong";
            document.getElementById("cw1").innerText = "密码长度为6—12位";
            return false;
        }
    }
}
function checkpass2() {
    var pass2 = document.getElementById("password2").value;
    var pass1 = document.getElementById("password1").value;
    var reg = /^[0-9a-zA-Z]{6,12}$/;
    if (pass2 == '') {
        document.getElementById("cw2").className = "wrong";
        document.getElementById("cw2").innerText = "不能为空!";
        return false;
    }
    else {
        if (reg.test(pass2) && pass1 == pass2) {
            document.getElementById("cw2").innerText = " ";
            return true;
        } else {
            document.getElementById("cw2").className = "wrong";
            document.getElementById("cw2").innerText = "密码不一致";
            return false;
        }
    }
}

提交部分

function checkall() {
    var now = new Date();
    var hour = now.getHours();
    var minute = now.getMinutes();
    var second = now.getSeconds();
    var week = now.getDay();
    var a = ['日', '一', '二', '三', '四', '五', '六'];
    var str = "现在是：" + hour + ":" + minute + ":" + second + ",星期" + a[week];
    if (checkname() == true && checkpass1() == true && check() == true && checkpass1() == true) {
        alert(str + "，注册成功！");
        location.href = "denglu.html";
    } else {
        alert("注册失败！");
        return false;
    }
}

登录与注册的应用场景其实不多，但是却是大部分的开发软件所需要实现的一部分，这个只是其实的一种实现方式，还有配合拦截器、过滤器等方式实现，这还需要看开发的需求情况来定。
嗯，差不多也就是这样了，希望能帮到你一些

登录和注册的基本实现，超简单！

前序

一 .登录

二. 注册的实现

热门文章

最新文章

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

登录和注册的基本实现，超简单！

前序

一 .登录

二. 注册的实现

热门文章

最新文章

相关电子书