技术文章

登录注册页面

m0_64180190

An editor at Blogzine

  • 2023-09-18
  • 16天前
  • 1.0w
  • 21 Views
  • 100

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>金融公司登录/注册</title>
  <style>
    /* 基本样式 */
    body {
      font-family: "Arial, sans-serif";
      background-color: #f2f2f2;
      border-radius: 5%;
      padding-left: 3%;
    }
    
    /* 页面容器 */
    .container {
      max-width: 400px;
      margin: 0 auto;
      padding: 20px;
      background-color: #fff;
      border-radius: 5px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
      transform: all 0.5s;
      border-radius: 5ch;
    
      
    }
    
   /* 表单样式 */
   .form-group {
     margin-bottom: 15px;
     font-family: "Arial, Helvetica, sans-serif";
     text-align: center;
   }
   
   .form-group label {
     display: block;
     font-weight: bold;
     margin-bottom: 5px;
     font-family: "Arial, Helvetica, sans-serif";
     
     
    
     
   }
   
   .form-group input,
   .form-group select {
     width: 370px;
     padding: 8px;
     font-size: 16px;
     
     border: 1px solid #ccc;
   }
   
   .form-group input[type="submit"] {
     background-color: #4CAF50;
     color: white;
     cursor: pointer;
     font-size: 17px;
     width: 100%;
     font-family: "Arial, Helvetica, sans-serif";
   }
   
   /* 悬浮动态效果 */
   .form-group input:hover,
   .form-group select:hover {
     border-color: #999;
   }
   
   .form-group input[type="submit"]:hover {
     background-color: #45a049;
     font-family: "Arial, Helvetica, sans-serif";
   }
   
   .form-group label:hover {
    border-bottom: #888 solid rgba(0, 0, 0, 0.2);
    transition: all 0.3s; 
    border-radius: 5px;
     color: #999;
   }
   
   /* 添加更多的动态悬浮效果 */
   .form-group input:focus,
   .form-group select:focus {
     border-color: #4CAF50;
     box-shadow: 0 0 5px #4CAF50;
   }
   
   .form-group input[type="submit"]:active {
     background-color: #367534;
   }
   
   .form-group input[type="submit"]:focus {
     outline: none;
   }
   
   .form-group input:disabled,
   .form-group select:disabled {
     background-color: #eee;
     cursor: not-allowed;
   }
   
   .form-group input[required]:invalid {
     border-color:  #FF0000;
   }
   
   .form-group input[required]:valid {
     border-color: #0f0;
   }
   
   .error-message {
     color: #ff0000;
     font-size: 14px;
     margin-top: 10px;
     font-family:" Arial, Helvetica, sans-serif";
     padding: 10px;
     max-width: 300px;
     background-color: #ffeaea;
     border-radius: 4px;
     border: 1px solid #e74c3c;
     transition: background-color 0.3s ease, border-color 0.3s ease;
     box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
   }
   
   .error-message:hover {
     color: #cc0000;
     background-color: #ffd6d6;
     border-color: #c0392b;
     box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
   }
   
   .error-message p {
     margin: 0;
   }
   
   .error-message strong {
     font-size: 16px;
   }

    /* 链接样式 */
        .links {
          margin-top: 15px;
          text-align: center;
        }
        
        .links a {
          margin-right: 10px;
          color: #008CBA;
          text-decoration: none;
          transition: color 0.3s ease;
        }
        
        .links a:hover {
          color: #005B7B;
        }
        
        .links a:active {
          color: #00A4D6;
        }
        
        .links a:focus {
          outline: none;
          color: #00A4D6;
        }
    

 /* Footer固定在底部 */
    .footer {
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      background-color: #f9f9f9;
      color: #888;
      text-align: center;
      padding: 10px 0;
      transition: all 0.3s;
    }
    
    @media (max-width: 600px) {
          /* 响应式样式 */
          .container {
            max-width: 100%;
            max-height: 100%;
          }
        }
        
        
        
        
        
        /* 复选框容器的样式 */
        .checkbox-container {
          display: flex;
          align-items: center;
        }
        
        /* 自定义复选框的样式 */
        .checkbox-container input[type="checkbox"] {
          opacity: 0;
          position: absolute;
        }
        
        /* 复选框的图标样式 */
        .checkbox-container .checkmark {
          width: 20px;
          height: 20px;
          border: 2px solid #ccc;
          border-radius: 5px;
          position: relative;
          cursor: pointer;
          transition: all 0.3s;
        }
        
        /* 选中复选框的样式 */
        .checkbox-container input[type="checkbox"]:checked + .checkmark::after {
          content: "";
          position: absolute;
          top: 4px;
          left: 4px;
          width: 12px;
          height: 12px;
          border-radius: 3px;
          background-color: #333;
        }
        
        /* 复选框文本的样式 */
        .checkbox-container label {
          font-size: 14px;
          margin-left: 10px;
        }
        
        /* 鼠标悬停在复选框容器时的样式 */
        .checkbox-container:hover input[type="checkbox"] + .checkmark {
          border-color: #999;
        }
        
        /* 鼠标悬停在复选框容器时，选中复选框的样式 */
        .checkbox-container:hover input[type="checkbox"]:checked + .checkmark::after {
          background-color: #999;
        }
        
        /* 复选框获取焦点时的样式 */
        .checkbox-container input[type="checkbox"]:focus + .checkmark {
          box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.1);
        }
        
        /* 复选框选中状态下的样式 */
        .checkbox-container input[type="checkbox"]:checked + .checkmark {
          border-color: #333;
          background-color: #333;
        }
        
        /* 复选框禁用状态下的样式 */
        .checkbox-container input[type="checkbox"]:disabled + .checkmark {
          opacity: 0.6;
          cursor: not-allowed;
        
        }
        
        /* 复选框禁用状态下的文本颜色 */
        .checkbox-container input[type="checkbox"]:disabled + .checkmark + label {
          color: #999;
        }
  </style>
</head>
<body>
  <div class="container" id="loginContainer">
    <h1>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;登录</h1>
    <form id="loginForm">
      <div class="form-group">
        <label for="username">用户名/邮箱/手机号码</label>
        <input type="text" id="username" name="username" required>
      </div>
      <div class="form-group">
        <label for="password">密码</label>
        <input type="password" id="password" name="password" required>
      </div>
      
       <input type="checkbox" id="remember" name="remember">
        <label for="remember">记住密码</label><br><br>
      <div class="form-group">
        <input type="submit" value="登录">
      </div>
      <div id="loginErrorMessage" class="error-message" style="display: none;">用户名或密码错误</div>
    </form>
    <div class="links">
      <a href="#" id="showRegisterForm">注册密码</a>
    </div>
  </div>

  <div class="container" id="registerContainer" style="display: none;">
    <h1>注册</h1>
    <form id="registerForm">
      <div class="form-group">
        <label for="regUsername">用户名</label>
        <input type="text" id="regUsername" name="regUsername" required>
      </div>
      <div class="form-group">
        <label for="regEmail">邮箱</label>
        <input type="email" id="regEmail" name="regEmail" required>
      </div>
      <div class="form-group">
        <label for="regPassword">密码</label>
        <input type="password" id="regPassword" name="regPassword" required>
      </div>
      <div class="form-group">
        <label for="confirmPassword">确认密码</label>
        <input type="password" id="confirmPassword" name="confirmPassword" required>
      </div>
      <div class="form-group">
        <input type="submit" value="注册">
      </div>
      <div id="registerErrorMessage" class="error-message" style="display: none;">密码不一致</div>
    </form>
    <div class="links">
        <a href="#" id="showLoginForm">返回登录</a>
    </div>
  </div>
    
  <div class="footer">
   <p> &copy 2023 金融公司版权所有</p>
  </div>

<script>
    window.addEventListener("DOMContentLoaded", function () {
          var showRegisterFormButton = document.getElementById("showRegisterForm");
          var showLoginFormButton = document.getElementById("showLoginForm");
          var loginForm = document.getElementById("loginForm");
          var registerForm = document.getElementById("registerForm");
          var usernameInput = document.getElementById("username");
          var passwordInput = document.getElementById("password");
          var loginErrorMessage = document.getElementById("loginErrorMessage");
          var regUsernameInput = document.getElementById("regUsername");
          var regEmailInput = document.getElementById("regEmail");
          var regPasswordInput = document.getElementById("regPassword");
          var confirmPasswordInput = document.getElementById("confirmPassword");
          var registerErrorMessage = document.getElementById("registerErrorMessage");
        
          // 显示注册表单
          showRegisterFormButton.addEventListener("click", function (event) {
            event.preventDefault();
            showForm("register");
          });
        
          // 显示登录表单
          showLoginFormButton.addEventListener("click", function (event) {
            event.preventDefault();
            showForm("login");
          });
        
          // 登录表单提交事件
          loginForm.addEventListener("submit", function (event) {
            event.preventDefault();
        
            var username = usernameInput.value;
            var password = passwordInput.value;
        
    
    // 进行登录验证逻辑，此处只做示例判断
            if (username === "李浩东" && validatePassword(password)) {
              alert("登录成功");
              window.location.href =
                "http://127.0.0.1:8848/%E9%87%91%E8%9E%8D%E5%85%AC%E5%8F%B8%E9%A1%B9%E7%9B%AE/%E9%87%91%E8%9E%8D%E5%85%AC%E5%8F%B8%E7%BD%91%E7%AB%99%E9%A6%96%E9%A1%B51.html";
            } else {
              loginErrorMessage.textContent = "用户名或密码错误";
              loginErrorMessage.style.display = "block";
            }
          });
        
          // 注册表单提交事件
          registerForm.addEventListener("submit", function (event) {
            event.preventDefault();
        
            var regUsername = regUsernameInput.value;
            var regEmail = regEmailInput.value;
            var regPassword = regPasswordInput.value;
            var confirmPassword = confirmPasswordInput.value;
        
            // 进行注册逻辑判断
            if (validatePassword(regPassword) && validateUsername(regUsername) && regPassword === confirmPassword) {
              if (validateEmail(regEmail)) {
                alert("注册成功");
                window.location.href =
                  "http://127.0.0.1:8848/%E9%87%91%E8%9E%8D%E5%85%AC%E5%8F%B8%E9%A1%B9%E7%9B%AE/%E7%99%BB%E5%BD%95%E6%B3%A8%E5%86%8C.html";
              } else {
                registerErrorMessage.textContent = "邮箱格式不正确";
                registerErrorMessage.style.display = "block";
              }
            } else {
              registerErrorMessage.textContent = "用户名只能包含字母、数字和中文字符；密码必须包含至少一个大写字母、一个小写字母和一个数字，且长度在8-20位之间；两次密码输入不一致,否则输入失败。";
              registerErrorMessage.style.display = "block";
            }
          });
        
          // 显示对应表单的函数
          function showForm(form) {
            if (form === "register") {
              document.getElementById("registerContainer").style.display = "block";
              document.getElementById("loginContainer").style.display = "none";
            } else if (form === "login") {
              document.getElementById("registerContainer").style.display = "none";
              document.getElementById("loginContainer").style.display = "block";
            }
          }
    
     // 邮箱验证函数
          function validateEmail(email) {
            var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            return emailRegex.test(email);
          }
        
          // 用户名验证函数
          function validateUsername(username) {
            var usernameRegex = /^[A-Za-z0-9\u4e00-\u9fa5]+$/;
            return usernameRegex.test(username);
          }
        
         // 密码验证函数
                  function validatePassword(password) {
                    var passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,20}$/;
                    return passwordRegex.test(password);
                  }
                });
  </script>
</body>
</html>

有人能帮我优化这段代码吗，我是原创的，一些好看的动画效果，响应式效果不太会添加

版权声明：

本文为[m0_64180190]所创，转载请带上原文链接，感谢

https://blog.csdn.net/m0_64180190/article/details/132975724

上一篇
【GitLab私有仓库】在Linux上用Gitlab搭建自己...
下一篇
Flutter的路由router-页面跳转

评论数 0

留下回复

如果您是个网络喷子或者键盘侠，那么建议您多看少说。
下一篇
Flutter的路由router-页面跳转