jQuery实现动画登录页面+表单验证+数据采用localStorage本地储存

最新推荐文章于 2024-06-04 15:23:15 发布
最新推荐文章于 2024-06-04 15:23:15 发布
阅读量1.2k 收藏 23
点赞数 4
分类专栏： 前端学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43205774/article/details/126821573
版权

jquery javascript 前端

一、页面样式

使用jQuery实现登录与注册页面滑动显示，登录与修改密码页面淡入淡出显示，简单的表单验证，注册数据采用localStorage本地储存。
Login

二、实现功能

  1. jQuery实现页面切换滑动动画

  2. 三大模块：登录模块、注册模块、修改密码模块
    登录：
    请添加图片描述
    注册：
    regist
    修改密码：
    请添加图片描述

  3. 注册模块用户username与password采用localStorage本地浏览器储存
    local 4.基本的表单输入用户名密码的格式与字符串类型、字符个数验证，采用正则表达式来验证

  // 数字与字母的正则表达式
        let zg = /^[0-9a-zA-Z]*$/;
        // 汉字正则表达式
        let reg = /^[^\u4e00-\u9fa5]+$/;

三、不足之处

  1. js代码有点杂乱，不过相应的注释都有，对应的模块都有，只是需要封装一下重复代码。

附录：
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">
    <title>Login</title>
    <script src="./jQuery.min.js"></script>
    <script src="./index.js"></script>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <div class="loginregistBox">
        <div class="loginbox">
            <div class="login">
                <h2>Sign In</h2>
                <form action="javascript:;">
                    <div class="logintext">
                        <input type="text" placeholder="username">
                        <input type="password" placeholder="password">
                    </div>

                    <input type="submit" class="submit" value="SIGN  IN">
                    <a href="javascript:;" class="forgotpwd">forgot Password</a>
                    <span></span>
                </form>


            </div>
            <div class="repwd">
                <h2>Modify Pwd</h2>
                <form action="javascript:;">
                    <div class="repwdtext">
                        <input type="text" placeholder="username" maxlength="12" minlength="5">
                        <div class="repwdtext_usr">
                            <i><img src="./img/icon/ture.png" alt=""></i>
                            <i><img src="./img/icon/false.png" alt=""></i>
                        </div>

                        <input type="password" placeholder="Newpassword(6-16chars)">
                        <div class="repwdtext_pwd">
                            <i><img src="./img/icon/ture.png" alt=""></i>
                            <i><img src="./img/icon/false.png" alt=""></i>
                        </div>

                        <input type="password" placeholder="reNewpassword">
                        <div class="repwdtext_repwd">
                            <i><img src="./img/icon/ture.png" alt=""></i>
                            <i><img src="./img/icon/false.png" alt=""></i>
                        </div>

                    </div>

                    <input type="submit" class="submit" value="SUBMIT">

                </form>
            </div>
            <div class="regist">
                <h2>Sign Up</h2>
                <form action="javascript:;">
                    <div class="registtext">
                        <input type="text" placeholder="username(5-12letters or nums)">
                        <div class="registtext_usr">
                            <i><img src="./img/icon/ture.png" alt=""></i>
                            <i><img src="./img/icon/false.png" alt=""></i>
                        </div>
                        <input type="password" placeholder="password(6-16chars)">
                        <div class="registtext_pwd">
                            <i><img src="./img/icon/ture.png" alt=""></i>
                            <i><img src="./img/icon/false.png" alt=""></i>
                        </div>
                        <input type="password" placeholder="repassword">
                        <div class="registtext_repwd">
                            <i><img src="./img/icon/ture.png" alt=""></i>
                            <i><img src="./img/icon/false.png" alt=""></i>
                        </div>
                    </div>

                    <input type="submit" class="submit" value="SIGN  UP">

                </form>
            </div>

        </div>

        <div class="switch">
            <img src="./img/switch1.jpg" alt="" class="switchright">
            <img src="./img/switch2.jpg" alt="" class="switchleft">
            <input type="button" value="SIGN  UP">
        </div>
    </div>

</body>

</html>

CSS：

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

body {
    background-image: linear-gradient(-90deg, #747df9 0%, #b93fec 100%);
}

ul li {
    list-style: none;
}

.loginregistBox {
    position: relative;
    left: 0;
    top: 256px;
    width: 750px;
    height: 450px;
    background-color: white;
    box-shadow: 4px 5px 4px 0 rgb(0 0 0 / 5%);
    border-radius: 10px;
    overflow: hidden;
}

.loginbox {
    width: 500px;
    height: 450px;
    /* border: 1px solid red; */
    position: absolute;
}

.login {
    text-align: center;
    width: 350px;
    height: 400px;
    /* border: 1px solid pink; */
    margin-top: 50PX;
    position: relative;
}

.repwd {
    text-align: center;
    width: 490px;
    height: 400px;
    /* border: 1px solid pink; */
    margin-top: 50PX;
    position: relative;
    display: none;
}

.regist {
    text-align: center;
    width: 490px;
    height: 400px;
    /* border: 1px solid pink; */
    margin-top: 50PX;
    position: relative;
    display: none;
}

.login h2,
.repwd h2,
.regist h2 {
    margin-top: 50px;
}

.login .logintext input,
.repwd .repwdtext input,
.regist .registtext input {
    outline: none;
    border-color: transparent;
    border: none;
    border-bottom: 2px solid #dde2de;
    width: 240px;
    height: 30px;
    margin-top: 45px;
    text-align: center;
    font-size: 16px;
}

.login .submit,
.repwd .submit,
.regist .submit {
    margin-top: 50px;
    width: 240px;
    height: 32px;
    border-radius: 20px;
    background-image: linear-gradient(-90deg, #747df9 0%, #b93fec 100%);
    border: none;
    color: white;
    cursor: pointer;
}

.login .forgotpwd {
    /* clear: left; */
    /* text-decoration: none; */
    font-size: 12px;
    position: absolute;
    left: 130px;
    bottom: 80px;
    color: #757575;
}

.login span {
    font-size: 16px;
    position: absolute;
    left: 140px;
    bottom: 50px;
    color: red;
}

.repwd .repwdtext i,
.regist .registtext i {
    margin-left: -24px;
    display: none;
    /* margin-top: 8px; */
    color: red;
    font-size: 14px;
}

.repwd .repwdtext i img,
.regist .registtext i img {
    width: 20px;
    height: 20px;
    /* display: none; */
}

.repwd .repwdtext .repwdtext_usr,
.repwdtext_pwd,
.repwdtext_repwd {
    position: absolute;
    right: 20px;
    margin-top: -25px;
    width: 150px;
    /* top: 0; */
    line-height: 20px;
}

.regist .registtext .registtext_usr,
.registtext_pwd,
.registtext_repwd {
    position: absolute;
    right: 20px;
    margin-top: -25px;
    width: 150px;
    /* top: 0; */
    /* line-height: 20px; */
}

.repwd .repwdtext .message {
    color: red;
    font-size: 14px;
}


/* swict */

.switch {
    width: 250px;
    height: 450px;
    position: absolute;
    right: 0;
    top: 0;
}

.switch .switchright {
    width: 250px;
    height: 450px;
}

.switch .switchleft {
    width: 250px;
    height: 450px;
    display: none;
}

.switch input {
    color: white;
    background-color: transparent;
    width: 80px;
    height: 32px;
    border-radius: 20px;
    border: 1.5px solid white;
    position: absolute;
    right: 80px;
    bottom: 112px;
    cursor: pointer;
}

.switch input:hover {
    background-color: rgb(255, 255, 255, 0.3);
}

JS：

$(function() {
    //动画  登录页面切换修改密码页面
    $(".forgotpwd").click(function() {
        $(".login .logintext input").val("");
        $(".login span").text("");
        $(".login").fadeOut();
        $(".repwd").delay("slow").fadeIn();

    });


    //验证并修改本地local密码
    $(".repwd .submit").click(function() {
        let password = $(".repwdtext input").eq(1).val();
        let repassword = $(".repwdtext input").eq(2).val();

        if (password == repassword) {
            if ($(".repwdtext i").eq(0).css("display") == "inline" && $(".repwdtext i").eq(2).css("display") == "inline" && $(".repwdtext i").eq(4).css("display") == "inline") {
                // 修改密码
                localStorage.setItem("password", $(".repwdtext input").eq(1).val());
                // 动画
                $(".repwd .repwdtext input").val("");
                $(".repwdtext").find("i").hide();
                $(".repwd").fadeOut();
                $(".login").delay("slow").fadeIn();
            }
        }
    });
    // 切换动画 swicth按钮切换
    $(".switch input").click(function() {
        if ($(".switch").css("right") == "0px") {
            // 登录框val置空  repwd标签隐藏
            $(".login .logintext input").val("");
            $(".login span").text("");
            $(".registtext").find("i").hide();
            $(".repwdtext input").val("");
            $(".repwdtext").find("i").hide();
            // 切换标签滑动
            $(".switch").animate({
                right: 500
            });
            // 登录框滑动
            $(".loginbox").animate({
                left: 250
            });
            $(".switch .switchright").hide().siblings().show();
            // login repwd都需要淡出
            // repwd验证标签重新隐藏
            $(".login").fadeOut("fast");
            $(".repwd").fadeOut("fast");
            $(".regist").delay(200).fadeIn();
            $(this).val("SIGN IN");
        } else {
            $(".regist .registtext input").val("");
            $(".switch").animate({
                right: 0
            });
            $(".loginbox").animate({
                left: 0
            });
            $(".switch .switchleft").hide().siblings().show();
            $(".regist").fadeOut("fast");
            $(".login").delay(200).fadeIn();
            $(this).val("SIGN UP")
        }

    })

    // 注册提交
    $(".regist .submit").click(function() {
        // 注册账号保存本地存储 local

        if ($(".registtext i").eq(0).css("display") == "inline" && $(".registtext i").eq(2).css("display") == "inline" && $(".registtext i").eq(4).css("display") == "inline") {
            localStorage.setItem("username", $(".registtext input").eq(0).val());
            localStorage.setItem("password", $(".registtext input").eq(1).val());
            $(".regist .registtext input").val("");

            // 动画  
            $(".registtext").find("i").hide();
            $(".switch").animate({
                right: 0
            });
            $(".loginbox").animate({
                left: 0
            });
            $(".switch .switchleft").hide().siblings().show();
            $(".regist").fadeOut("fast");
            $(".login").delay(200).fadeIn();
            $(this).val("SIGN UP")

        }
    })

    //表单验证  修改密码  修改密码框
    $(".repwdtext input").focusout(function() {
        let username = $(".repwdtext input").eq(0).val();
        let password = $(".repwdtext input").eq(1).val();
        let localusername = localStorage.getItem("username");
        let repassword = $(".repwdtext input").eq(2).val();
        let reg = /^[^\u4e00-\u9fa5]+$/;
        
        if (username != "") {
            if (username == localusername) {
                // console.log($(".repwdtext_usr span").eq(0))
                $(".repwdtext_usr i").eq(0).show().siblings().hide();
            } else {
                $(".repwdtext_usr i").eq(1).show().siblings().hide();
            }
        }

        if (password != "") {
            if (password.length >= 6 && password.length <= 16) {
                if (reg.test(password)) {
                    $(".repwdtext_pwd i").eq(0).show().siblings().hide();
                } else {
                    $(".repwdtext_pwd i").eq(1).show().siblings().hide();
                }

            } else {
                $(".repwdtext_pwd i").eq(1).show().siblings().hide();
            }
        }
        if (repassword != "") {
            if (password === repassword) {
                $(".repwdtext_repwd i").eq(0).show().siblings().hide();
            } else {
                $(".repwdtext_repwd i").eq(1).show().siblings().hide();
            }
        }
    })


    // 注册框
    $(".registtext input").focusout(function() {
        let username = $(".registtext input").eq(0).val();
        let password = $(".registtext input").eq(1).val();
        let repassword = $(".registtext input").eq(2).val();

        // 数字与字母的正则表达式
        let zg = /^[0-9a-zA-Z]*$/;
        // 汉字正则表达式
        let reg = /^[^\u4e00-\u9fa5]+$/;
        // 验证用户名
        if (username != "") {
            if (username.length >= 5 && username.length <= 12) {
                if (zg.test(username)) {
                    $(".registtext_usr i").eq(0).show().siblings().hide();
                } else {
                    $(".registtext_usr i").eq(1).show().siblings().hide();
                }
            } else {
                $(".registtext_usr i").eq(1).show().siblings().hide();
            }
        }
        // 验证密码
        if (password != "") {
            if (password.length >= 6 && password.length <= 16) {
                if (reg.test(password)) {
                    $(".registtext_pwd i").eq(0).show().siblings().hide();
                } else {
                    $(".registtext_pwd i").eq(1).show().siblings().hide();
                }

            } else {
                $(".registtext_pwd i").eq(1).show().siblings().hide();
            }
        }

        //
        if (repassword != "") {
            if (password === repassword) {
                $(".registtext_repwd i").eq(0).show().siblings().hide();
            } else {
                $(".registtext_repwd i").eq(1).show().siblings().hide();
            }
        }
    })

    // 登录框验证
    $(".login .submit").click(function() {
        let localusername = localStorage.getItem("username");
        let localpassword = localStorage.getItem("password");
        let username = $(".logintext input").eq(0).val();
        let password = $(".logintext input").eq(1).val();

        if (username == localusername) {

            if (password == localpassword) {
                alert("登录成功！！！")
                $(".login span").text("登录成功");
            } else {

                $(".login span").text("密码错误");
            }
        } else {
            $(".login span").text("用户名错误");
        }
    })
})
柒月VII
关注
  • 4
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
jquery写登录页面
caohongxia666的博客
10-24 2134
//密码可见切换 $("i.pwd-icon").on("click", function() { if($(this).hasClass("icon-eye_protection")) { // 令其可见 $("#txtPwd").attr("type", "text"); $(this).removeClass("icon-eye_protection") .addCl...
jquery实现登录成功界面_jquery实现用户登陆界面(示例讲解)
weixin_39997089的博客
12-21 1185
实例如下所示：var cnresu = false;$(function(){$("input[name='uname']").blur(function(){//blur从链接上移开焦点(鼠标离开框时)var unamestr = $(this).val();var regstr = /^[\u4e00-\u9fa5]{2,4}$/;if(!regstr.test(unamestr)){$(th...
jquery 炫酷登录页面
11-12
在jquery炫酷登录页面的基础上进行改版，实现鼠标点击页面效果
使用jquery登录界面案例的实现
studyinstall的博客
06-04 525
【代码】使用jquery登录界面案例的实现。
jquery超炫的登录界面
08-24
一款超炫的登录界面，带动画效果
用点jquery实现的登录页面
qq_44645648的博客
11-14 2230
登录页面
LocalStorage+HTML+CSS+jQuery 实现简易的学生管理系统
10-04
总结来说，这个项目综合运用了前端开发的基本技术，通过HTML构建用户界面，CSS进行美化，JavaScript（ES6）和jQuery处理交互逻辑，以及LocalStorage实现数据持久化，从而实现了一个简单易用的学生信息管理平台。...
jquery+css3实现弹出层注册特效.zip
11-19
4. **Ajax交互**：如果注册信息需要实时验证或发送到服务器，jQuery的Ajax功能可以实现异步数据传输，无需刷新页面。 **CSS3** CSS3是CSS的最新版本，提供了许多新的样式和动画特性。在弹出层注册特效中，CSS3可以...
html5+jquery非常炫丽的登录界面，包含登录、注册、修改密码等效果
03-07
此外，HTML5的离线存储机制（如localStorage和sessionStorage）可以在用户浏览器中本地存储数据，这在处理登录状态和记住密码功能时非常有用。 接着，jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件...
移动端手机号注册登录+验证码页面+填写资料
08-03
- **离线存储**：Web Storage（localStorage和sessionStorage）可以临时或长期存储用户数据，方便实现离线应用。 - **推送通知**：对于注册用户，可以使用Service Worker和Web Push API实现实时推送消息。 6. **...
jQuery实现分步骤注册表单效果(对于长表单的填写非常好用).zip
11-18
综上所述，jQuery是构建分步骤注册表单的强大工具，它简化了DOM操作、事件处理、动画和表单验证等复杂任务，从而提升用户体验并减少编程难度。通过巧妙地运用这些技术，我们可以创建出既实用又美观的分步骤注册表单...
JQUery超炫登录界面login
02-25
用JQUery实现的超炫登录界面login
动态背景登录页面(基于jquery)
04-27
动态登录基于jquery做的，每隔几秒会自动将登录背景图片切换
漂亮精美的JQuery登录页面模版
03-24
漂亮精美的JQuery登录页面模版 里面有源代码，打开index.html即可预览页面
10个漂亮登录页面，jquery+css3
04-27
10个漂亮登录页面，jquery+css310个漂亮登录页面，jquery+css310个漂亮登录页面，jquery+css310个漂亮登录页面，jquery+css310个漂亮登录页面，jquery+css310个漂亮登录页面，jquery+css3
使用jQuery如何写一个含验证码的登录界面
10-17
主要介绍了如何写一个含验证码的登录界面，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
jquery 注册登录页面
weixin_45822986的博客
10-07 3000
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>练习jqu</title> <!-- 根据自己本地jquery脚本引入 --> <script src="./static/js/jquery-3.1.1.min.js"> </script> <script>
基于Jquery实现登录功能的前端页面
热门推荐
阳菜
08-31 3万+
本篇文章讲解如何用jquery完成登录功能的前端页面展示 html部分： <div class="name"> <label>用户名:</label> <input type="text" name="username" id="username"> </div> <div class="password"&g...
jquery用户登录
最新发布
06-26
jQuery是一个流行的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互等任务，但并不是用于直接实现用户登录功能的框架。然而，jQuery可以与后端技术（如PHP、Node.js等）结合使用，用来构建用户登录系统。 在使用jQuery实现用户登录时，通常会涉及以下几个步骤： 1. **HTML表单**：创建一个包含用户名和密码输入字段的表单，以及登录按钮。 ```html <form id="loginForm"> <input type="text" id="username" placeholder="用户名"> <input type="password" id="password" placeholder="密码"> <button type="submit">登录</button> </form> ``` 2. **jQuery事件处理**：使用`.on('submit', function(event))`来阻止表单的默认提交行为，并在事件中发送AJAX请求到服务器。 ```javascript $(document).ready(function(){ $('#loginForm').on('submit', function(event) { event.preventDefault(); // 阻止表单默认提交 var username = $('#username').val(); var password = $('#password').val(); // 发送AJAX请求 $.ajax({ type: 'POST', url: '/api/login', data: { username: username, password: password }, success: function(response) { // 处理登录成功或失败的响应 }, error: function() { // 处理错误情况 } }); }); }); ``` 3. **服务器响应**：后端接收到登录请求后，验证用户名和密码，如果验证通过，可能会返回一个token或其他验证信息，然后客户端可能需要处理这个响应并保存用户的登录状态。 4. **状态管理**：使用cookies、localStorage或sessionStorage来存储用户的登录状态，以便在后续请求中检查。 相关问题-- 1. jQuery如何防止表单默认提交？ 2. 如何在jQuery中发送异步的HTTP请求？ 3. 服务器验证用户登录时通常返回哪些信息？
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

柒月VII

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值