HTML+CSS+JS实现登入注册页面及其功能_使用javascript实现注册表单的验证,先使用html+css实现注册页面,再使用javascr-CSDN博客

本文链接：https://blog.csdn.net/m0_65762354/article/details/130734311

直接上代码

登入部分

<!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>Document</title>
  <style>
    .zhuti {
      width: 250px;
      height: 200px;
      border: 1px solid beige;
      background-color: rgba(231, 222, 222, 0.5);
      margin: 200px auto;
      color: black;
      border-radius: 5px;
      padding: 30px 25px;
      text-align: center;
    }
    body {
      width: auto;
      height: auto;
      background: url(145.webp);
      background-size: cover;
      background-repeat: no-repeat;
    }
    .sub {
      margin: 10px 70px;
      height: 30px;
      width: 50px;
    }
    h1 {
      margin-top: 0%;
    }
    .mm {
      margin-top: 10px;
    }
    a {
      color: blue;
      text-decoration: none;
    }
  </style>
</head>
<body>
  <div class="zhuti">
    <form method="get">
      <h1>登入</h1>
      <table>
        <tr>
          <td>用户名：</td>
          <td><input type="text" class="dr_username" placeholder="请输入用户名"></td>
        </tr>
        <tr>
          <td>密码:</td>
          <td><input type="password" class="dr_password" class="mm"></td>
        </tr>
      </table>
      <input type="submit" value="登入" class="sub" id="dr"><br>
      <a href="zc.html">还没有账号?，先注册一个</a>
    </form>
  </div>
  <script>
    var dru = document.querySelector('.dr_username');
    var drp = document.querySelector('.dr_password');
    var set = document.querySelector('.sub');
    set.addEventListener('click', function () {
      var val1=dru.value;
      var val2=drp.value;
      var val3=JSON.parse(window.localStorage.getItem('ipt'));
      var val4=JSON.parse(window.localStorage.getItem('pw'));
      if(val1==val3 && val2==val4){
        window.open("https://1984453832.github.io/","_blank");
      }else{
        alert("用户名或者密码错误");
      }
    })
  </script>
</body>
</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>Document</title>
  <style>
    div{
      width: 300px;
      height: 260px;
      margin: 220px auto;
      background-color:rgba(231, 222, 222, 0.5);
      text-align: center;
      padding: 10px;
      border: 1px solid beige;
      border-radius: 5px;
    }
    body{
      background:url(145.webp) ;
      background-repeat: no-repeat;
      background-size: cover;
    }
    .sub{
      margin-top: 10px;
      height: 30px;
      width: 50px;
    }
    a{
      color: blue;
      text-decoration: none;
    }
  </style>
</head>
<body>
  <div>
    <h1 style="text-align: center;">注册</h1>
    <table>
      <tr>
        <td>用户名：</td>
        <td><input type="text" class="username"></td>
      </tr>
      <tr>
        <td>密码：</td>
        <td><input type="password" class="password"></td>
      </tr>
      <tr>
        <td>再次输入密码：</td>
        <td><input type="password"></td>
      </tr>
      <tr>
        <td>邮箱：</td>
        <td><input type="text"></td>
      </tr>
    </table>
    <input type="submit" value="提交" class="sub"><br>
    <a href="br.html">返回登入界面</a>
    </div>
    <script>
      var ipt=document.querySelector('.username');
      var pw=document.querySelector('.password')
      var set=document.querySelector('.sub');
      set.addEventListener('click',function(){
        var val=ipt.value;
        var val1=pw.value;
        localStorage.setItem('ipt',val)
        localStorage.setItem('pw',val1)
        alert('注册成功')
      })
    </script>
</body>
</html>