面馆师傅 2022-02-15 16:20 采纳率: 73.7%
浏览 183
已结题

html输入框，js接收到信息进入页面

我有一个重要的页面不想对所有人都公开，想做一个html单页面，内容是一个会员账号与姓名输入框，一个确认键，一个重置键。js里面可以填写多个会员账号与姓名，如果html输入的姓名与账号与js一致，就能显示我那个重要的页面，如果输入的信息不一致就弹出一个窗口显示错误提示。能否实现

  • 写回答

8条回答 默认 最新

  • 归来巨星 前端领域新星创作者 2022-02-15 16:24
    关注
    
<!--
 * @Author: your name
 * @Date: 2021-12-30 16:59:23
 * @LastEditTime: 2022-02-15 17:05:47
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /未命名文件夹/123.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="Generator" content="EditPlus®" />
    <meta name="Author" content="" />
    <meta name="Keywords" content="" />
    <meta name="Description" content="" />
    <title>Document</title>
    <style type="text/css" rel="stylesheet">
      .wrap {
        margin: 0 auto;
        width: 400px;
      }
    </style>
  </head>
  <body>
    <div class="wrap">
      <h1>登录系统</h1>
      <fieldset>
        <form method="get">
          <p>姓    名: <input type="text" name="name" id="name" /></p>
          <p>密    码: <input type="password" name="name" id="password" /></p>
          <button id="sub" type="button">登录</button>    <button type="reset">重置</button>   
        </form>
      </fieldset>
    </div>
  </body>
  <script>
    var names = [
      {
        name: "小明",
        password: "123",
      },
      {
        name: "小红",
        password: "123",
      },
      {
        name: "小刚",
        password: "123",
      },
    ];
    document.querySelector("#sub").onclick = function () {
      let name = document.querySelector("#name").value;
      let password = document.querySelector("#password").value;
      let isUser = names.filter((item) => {
        return item.name == name;
      });
      console.log(isUser);
      if (isUser.length > 0) {
        if (isUser[0].password == password) {
          window.location.href = "http://baidu.com";
        } else {
          alert("登陆失败");
        }
      } else {
        alert("请输入正确的用户名!");
      }
    };
  </script>
</html>

    img

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
    1人已打赏
查看更多回答(7条)

报告相同问题？

问题事件

  • 系统已结题 2月23日
  • 已采纳回答 2月15日
  • 创建了问题 2月15日