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

news/2024/7/11 0:20:15 标签: jquery, javascript, 前端

一、页面样式

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

二、实现功能

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

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

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

javascript">  // 数字与字母的正则表达式
        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：

javascript">$(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("用户名错误");
        }
    })
})

http://www.niftyadmin.cn/n/1579581.html

相关文章

网络故障排除连载之六：VLAN故障排除

网络故障排除连载之六：VLAN故障排除

1、VLAN的引入 用于隔离网络风暴&#xff0c;增加网络安全性&#xff0c;早期用路由器进行隔离&#xff0c;但成本高&#xff0c;效率低&#xff0c;应用复杂 。增加了4个字节的特殊标注域&#xff0c;用于区别不同用户发送的数据帧&#xff0c;其中VLAN ID占用12个bit2、VLAN…
阅读更多...
jquery实现toDolist—local storage的增删改查

jquery实现toDolist—local storage的增删改查

一、实现效果 二、实现功能 输入框输入需要做的事件&#xff0c;回车后保存到本地local storage里面&#xff0c;渲染到页面点击删除按钮清除local storage对应的数组值&#xff0c;并且重新渲染到页面点击前面check单选框后&#xff0c;修改local里面储存的done值&#xff0c…
阅读更多...
Java同步机制

Java同步机制

1、Pattern源代码 &#xff08;1&#xff09;matcher()函数的作用是编译已有的正则表达式&#xff0c;然后返回对应序列的匹配器&#xff0c;其涉及到的同步机制:volatile和synchronized的使用&#xff0c;单例模式常用到的DCL的问题&#xff0c;互斥和可见性。这篇博客解释得很…
阅读更多...
使用jQuery实现echars智能图表面板（附代码）

使用jQuery实现echars智能图表面板（附代码）

1、实现效果 2、核心思路 主要使用echars.js的库来实现所有图表布局采用display:flex布局&#xff0c;通过px to rem将px转换为rem单位&#xff0c;让页面变化时&#xff0c;字体大小&#xff0c;盒子大小也跟随变化地图引用了china.js&#xff0c;不过都是基于echars.js来做的…
阅读更多...
rabbitMq怎么查看队列消息-Tracing日志

rabbitMq怎么查看队列消息-Tracing日志

Trace 是Rabbitmq用于记录每一次发送的消息&#xff0c;方便使用Rabbitmq的开发者调试、排错。 1、启动Tracing插件 在RabbitMQ中默认是关闭的&#xff0c;需手动开启。此处rabbitMQ是使用docker部署的 ## 进入rabbitMq中 docker exec -it rabbitmq1 bash ## 启动日志插件 rabb…
阅读更多...
Android应用程序使用Localsocket与Linux层通信

Android应用程序使用Localsocket与Linux层通信

http://www.yurushao.net/?p789 Android应用程序使用Localsocket与Linux层通信 此条目发表在 学习 分类目录&#xff0c;贴了 Android, Linux, localsocket 标签。将固定链接加入收藏夹。localsocket&#xff0c;也叫做Unix Domain Socket&#xff0c;在前一篇文章中讲到过&am…
阅读更多...
[ 转]Android ExpandableList 可折叠列表视图 学习之一

[ 转]Android ExpandableList 可折叠列表视图 学习之一

本文转自&#xff1a;http://blog.sina.com.cn/s/blog_5033827f0100mkqu.html 在Android开发的过程中&#xff0c;大家希望能实现可折叠列表视图 1.list.xml 源码 <?xml version"1.0" encoding"utf-8"?><RelativeLayout xmlns:android"htt…
阅读更多...
Node+express+ejs+mysql制作查询数据呈现前端页面

Node+express+ejs+mysql制作查询数据呈现前端页面

一、实现样式 二、页面结构 1、文档结构 2、数据库mysql结构 3、使用到的模块 三、核心思路 该案例使用nodeexpressejsmysql共同实现&#xff0c;实现效果很简单&#xff0c;查询数据库&#xff0c;获取数据后&#xff0c;呈现在前端页面上面&#xff0c;连接mysql或者数…
阅读更多...
最新文章

Copyright @ 2022~2023