【网页开发】登录注册页面01

已于 2022-03-24 15:43:51 修改
阅读量2.8w 收藏 844
点赞数 100
分类专栏： 网页开发、前端 文章标签： html css css3
于 2020-10-12 15:50:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq1437722579/article/details/109029257
版权

效果图如下：
在这里插入图片描述
在这里插入图片描述

源代码如下：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>房产登录注册系统</title>
    <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <style>
        * {
            box-sizing:border-box;
        }
        body {
            font-family:'Montserrat',sans-serif;
            background:#f6f5f7;
            display:flex;
            flex-direction:column;
            justify-content:center;
            align-items:center;
            height:100vh;
            margin:-20px 0 50px;
        }
        h1 {
            font-weight:bold;
            margin:0;
        }
        p {
            font-size:14px;
            line-height:20px;
            letter-spacing:.5px;
            margin:20px 0 30px;
        }
        span {
            font-size:12px;
        }
        a {
            color:#333;
            font-size:14px;
            text-decoration:none;
            margin:15px 0;
        }
        .dowebok {
            background:#fff;
            border-radius:10px;
            box-shadow:0 14px 28px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.22);
            position:relative;
            overflow:hidden;
            width:768px;
            max-width:100%;
            min-height:480px;
        }
        .form-container form {
            background:#fff;
            display:flex;
            flex-direction:column;
            padding:0 50px;
            height:100%;
            justify-content:center;
            align-items:center;
            text-align:center;
        }
        .social-container {
            margin:20px 0;
        }
        .social-container a {
            border:1px solid #ddd;
            border-radius:50%;
            display:inline-flex;
            justify-content:center;
            align-items:center;
            margin:0 5px;
            height:40px;
            width:40px;
        }
        .social-container a:hover {
            background-color:#eee;
        }
        .form-container input {
            background:#eee;
            border:none;
            padding:12px 15px;
            margin:8px 0;
            width:100%;
            outline:none;
        }
        button {
            border-radius:20px;
            border:1px solid lightseagreen;
            background:lightseagreen;
            color:#fff;
            font-size:12px;
            font-weight:bold;
            padding:12px 45px;
            letter-spacing:1px;
            text-transform:uppercase;
            transition:transform 80ms ease-in;
            cursor:pointer;
        }
        button:active {
            transform:scale(.95);
        }
        button:focus {
            outline:none;
        }
        button.ghost {
            background:transparent;
            border-color:#fff;
        }
        .form-container {
            position:absolute;
            top:0;
            height:100%;
            transition:all .6s ease-in-out;
        }
        .sign-in-container {
            left:0;
            width:50%;
            z-index:2;
        }
        .sign-up-container {
            left:0;
            width:50%;
            z-index:1;
            opacity:0;
        }
        .overlay-container {
            position:absolute;
            top:0;
            left:50%;
            width:50%;
            height:100%;
            overflow:hidden;
            transition:transform .6s ease-in-out;
            z-index:100;
        }
        .overlay {
            background:lightseagreen;
            background:linear-gradient(to right,lightseagreen,lightseagreen) no-repeat 0 0 / cover;
            color:#fff;
            position:relative;
            left:-100%;
            height:100%;
            width:200%;
            transform:translateY(0);
            transition:transform .6s ease-in-out;
        }
        .overlay-panel {
            position:absolute;
            top:0;
            display:flex;
            flex-direction:column;
            justify-content:center;
            align-items:center;
            padding:0 40px;
            height:100%;
            width:50%;
            text-align:center;
            transform:translateY(0);
            transition:transform .6s ease-in-out;
        }
        .overlay-right {
            right:0;
            transform:translateY(0);
        }
        .overlay-left {
            transform:translateY(-20%);
        }
        /* Move signin to right */
        .dowebok.right-panel-active .sign-in-container {
            transform:translateY(100%);
        }
        /* Move overlay to left */
        .dowebok.right-panel-active .overlay-container {
            transform:translateX(-100%);
        }
        /* Bring signup over signin */
        .dowebok.right-panel-active .sign-up-container {
            transform:translateX(100%);
            opacity:1;
            z-index:5;
        }
        /* Move overlay back to right */
        .dowebok.right-panel-active .overlay {
            transform:translateX(50%);
        }
        /* Bring back the text to center */
        .dowebok.right-panel-active .overlay-left {
            transform:translateY(0);
        }
        /* Same effect for right */
        .dowebok.right-panel-active .overlay-right {
            transform:translateY(20%);
        }
    </style>
</head>

<script type="text/javascript">
    //onblur失去焦点事件，用户离开输入框时执行 JavaScript 代码：
    //身份证号格式
    function validate_idcard(idcard) {
        var idcardReg = /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;

        if (idcard != "" && idcard.search(idcardReg) != -1) {
            document.getElementById("test_idcard").innerHTML = "<font color='green' size='3px'>√身份证号格式正确</font>";
        }else {
            document.getElementById("test_idcard").innerHTML = "<font color='red' size='3px'>身份证号不能为空</font>";
        }

    }
    //函数1：验证用户名格式
    function validate_username(username) {

        if (username != "") {
            document.getElementById("test_user").innerHTML = "<font color='green' size='3px'>√用户名正确</font>";
        } else {
            document.getElementById("test_user").innerHTML = "<font color='red' size='3px'>用户名错误</font>";
        }
    }

    //函数2：验证密码是否符合要求
    function validate_password(password) {
        //^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6-10}$
        var passwordReg = /^[a-zA-Z]\w{5,17}$/;
        if (password != "" && password.search(passwordReg) != -1) {
            document.getElementById("test_pw").innerHTML = "<font color='green' size='3px'>√密码格式正确</font>";
        } else {
            document.getElementById("test_pw").innerHTML = "<font color='red' size='3px'>亲，您输入的密码格式有误哦</font>";
            // alert("密码由数字和字母组成!");
        }
    }

    //函数3：验证两次输入的密码是否一样
    function validate_password2(password2) {
        var password = document.getElementById("password").value;
        //测试：console.log(password);
        //测试：console.log(password2);
        if (password == "") {
            document.getElementById("is_test_pw").innerHTML = "<font color='red' size='3px'>密码不为空</font>";
        } else if (password == password2) {
            document.getElementById("is_test_pw").innerHTML = "<font color='green' size='3px'>√两次输入的密码相同</font>";
        } else {
            document.getElementById("is_test_pw").innerHTML = "<font color='red' size='3px'>两次输入的密码不相同</font>";
            // console.log("密码由数字和字母组成!");
        }
    }
</script>
<body>
<div class="dowebok" id="dowebok">
    <div class="form-container sign-up-container">
        <form action="user/addUser">
            <h1>注册</h1>

            <span>请输入您的信息</span>
            <input type="text" id="idcard" name="idcard" placeholder="身份证号"
                   onblur="validate_idcard(this.value)">

            <input type="text" id="Username" name="username" placeholder="姓名"
                   onblur="validate_username(this.value)">

            <input type="password" id="Password" name="password" placeholder="以字母开头只能包含字母、数字和下划线"
                   onblur="validate_password(this.value)">
            <input type="password" id="Password2" name="password2" onblur="validate_password2(this.value)" placeholder="确认密码">
            <button>注册</button>
        </form>
    </div>
    <div class="form-container sign-in-container">
        <form action="house/mainHouse">
            <h1>登录</h1>

            <span>或使用您的帐号</span>
            <input type="text" placeholder="身份证号">
            <input type="text" placeholder="姓名">
            <input type="password" placeholder="密码">
            <a href="###">忘记密码？</a>
            <button>登录</button>
        </form>
    </div>
    <div class="overlay-container">
        <div class="overlay">
            <div class="overlay-panel overlay-left">
                <h1>已有帐号？</h1>
                <p>请使用您的帐号进行登录</p>
                <button class="ghost" id="signIn">登录</button>
            </div>
            <div class="overlay-panel overlay-right">
                <h1>没有帐号？</h1>
                <p>立即注册加入我们，和我们一起开始旅程吧</p>
                <button class="ghost" id="signUp">注册</button>
            </div>
        </div>
    </div>
</div>

<script>
    var signUpButton = document.getElementById('signUp')
    var signInButton = document.getElementById('signIn')
    var container = document.getElementById('dowebok')

    signUpButton.addEventListener('click', function() {
        container.classList.add('right-panel-active')
    })

    signInButton.addEventListener('click', function() {
        container.classList.remove('right-panel-active')
    })
</script>

</body>
</html>

其他网页登录注册页面
自动轮播图片登陆注册页面
源码直接下载使用，带雪花的登陆注册页面、精美图片登陆注册页面

lucky__cc
关注
专栏目录
使用html+css+js实现完整的登录注册页面
qq_43580271的博客
08-14 1120
在本教程中，我们创建了一个包含登录和注册功能的基本页面。通过 HTML 定义页面结构，使用 CSS 进行样式设计，并通过 JavaScript 实现页面功能，我们构建了一个功能完备的用户界面。这种基础的设计可以根据需要进一步扩展，例如添加表单验证、与后端 API 集成等。希望这个详细的教程对您有所帮助！如果您有任何问题或建议，请在评论区留言，我们将尽快回复。
网页登陆注册页面
06-23
纯手写，ASP网络高级代码，网络登陆注册页面
登录注册的页面制作
weixin_33889665的博客
12-19 332
下面来做一个超简易的登录注册 先来说注册 得先写个大标题证明是注册页面，然后再就是文本框填内容，在注册这里建三个文本框，用户名，密码，还有姓名，最后还有一个注册的按钮，用来跳转页面 分析好了之后，先建注册页面的第一个网页 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or...
登录注册页面（html css）
weixin_47463009的博客
06-09 4991
效果如图：
登录注册页面
热门推荐
qq_45749629的博客
05-13 1万+
简单实现网站的登录，注册页面 一、登录界面 1、html <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="index.css" type="text/css"> </head> <body> <div class="container"&g
登录注册页面1
鼹鼠的博客
04-15 637
&lt;p&gt;   &lt;/p&gt;&lt;pre name="code" class="html"&gt; &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;登录&lt;/ti
JavaWeb登录注册页面
08-02
JavaWeb登录注册页面是Web应用开发中的基础模块，主要用于用户的身份验证和信息管理。这个项目集成了验证码生成与验证、记住账号密码的功能，并且利用了Filter进行请求拦截，以提高系统的安全性和用户体验。同时，该...
精品源码 / 网页模板 / 移动端 / 登录注册页面
12-26
在IT行业中，网页模板是构建网站或移动应用界面的基础元素，尤其对于移动端的登录和注册页面，它们的设计和用户体验至关重要。这款"移动端APP登录注册页面"的模版提供了丰富的功能和设计元素，使得开发者和设计师...
登录注册页面html
06-15
基于html css jq的登录注册页面，含validate手机号码验证,简单易懂，仅供学习使用，路啦啦啦啦啦啦啦
登录注册界面（HTML）
12-20
注册界面可判断密码为空、前后密码是否一致、账号名是否与数据库的重复；登陆界面错误提示淡入动画出现，界面清新整洁，有动态背景图 HTML注册登录
简单登陆注册页面
05-30
新手初学者看得懂的 登陆注册页面，注册有用正则表达式来表单验证。希望小白能从我的代码里了解学习到一些
登录和注册html页面（简洁美观）
05-25
简洁美观的登录和注册html页面，从17素材网站充钱下载所得，分享出来供大家使用。
用户注册登录页面
02-10
用户注册登录的网站，包含页面跳转的功能，以及div弹出框。 页面风格用CSS搭建。
基于SSM，myeclipse开发的网页，有前端页面以及登陆注册管理等功能
12-30
【标题】：“基于SSM，myeclipse开发的网页，有前端页面以及登陆注册管理等功能” 这个项目是一个基于Spring、SpringMVC和MyBatis（SSM）框架的Web应用程序，利用MyEclipse作为集成开发环境进行开发。SSM框架是Java...
简单的静态登录注册页面
05-02
总之，制作一个简单的静态登录注册页面是前端开发入门的重要步骤，它能够帮助开发者熟练掌握HTML、CSS和JavaScript的基本语法和实际运用，提升对网页结构和交互逻辑的理解。虽然这个项目在实际应用中的价值可能有限...
漂亮大气注册登录页面模板.zip
04-03
首先，我们要理解登录和注册页面的设计原则。这两个页面通常是用户与网站或应用的初次接触点，因此它们应该直观、易于理解和操作。这个模板设计遵循了这些原则，以简洁的布局和清晰的元素分隔，使用户能够轻松找到...
评论 39
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

lucky__cc

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

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

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

打赏作者

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

抵扣说明：

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

余额充值