时间戳

首页 > 解决方案 > 嘿，我怎样才能验证用户名和密码？似乎javascript没有得到值

javascript - 嘿，我怎样才能验证用户名和密码？似乎javascript没有得到值

问题描述

我想验证用户名和密码，如果用户名和密码正确，那么通过单击“Enter”，用户将移至另一个浏览器页面但我无法获取用户写入 JS 的值（我放了一个链接到 YouTube，因为我不知道如何链接到另一个 HTML 页面）我会很高兴得到一些帮助.. 谢谢！

let form = document.getElementById('login').innerHTML;
let password = document.getElementById('passwordbox').innerHTML.value;
let Enter = document.getElementById('Enter').innerHTML.value;
let user = document.getElementById('userlogbox').innerHTML.value;


function check(form)


{
  if (form.userid.value == 'abcd') {
    window.open('https://www.youtube.com');
  } else {
    alert("the username you enterd not match");
  }
}

function check(form) {
  if (form.password.value == '1234') {
    window.open('https://www.youtube.com');
  } else {
    alert("the password you enterd not match");
  }
}
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background: url(bg.jpg) no-repeat;
  background-size: cover;
}

.login-box {
  width: 280px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

.login-box h1 {
  float: left;
  font-size: 40px;
  border-bottom: 6px solid #4caf50;
  margin-bottom: 50px;
  padding: 13px 0;
}

.textbox {
  width: 100%;
  overflow: hidden;
  font-size: 20px;
  padding: 8px 0;
  margin: 8px 0;
  border-bottom: 1px solid #4caf50;
}

.textbox i {
  width: 26px;
  float: left;
  text-align: center;
}

.textbox input {
  border: none;
  outline: none;
  background: none;
  color: white;
  font-size: 18px;
  width: 80%;
  float: left;
  margin: 0 10px;
}

.btn {
  width: 100%;
  background: none;
  border: 2px solid #4caf50;
  color: white;
  padding: 5px;
  font-size: 18px;
  cursor: pointer;
  margin: 12px 0;
}
<form id='login' class='login'>
  <div id='userlogbox' class="login-box">
    <h1>Sudoku</h1>
    <div class="textbox">
      <i class="fas fa-user"></i>
      <input type="text" placeholder="Username" name="userid">
    </div>

    <div id='passwordbox' class="textbox">
      <i class="fas fa-lock"></i>
      <input type="password" placeholder="Password" name="password">
    </div>

    <button><input id='Enter' type="button" class="btn" value="Enter" onclick="check(this.form)" value="Enter"/>
  </button>
  </div>
</form>

标签： javascripthtml

解决方案

我还在学习，所以这似乎是一场灾难，但感谢的是我不能使用我们还没有学过的东西 -addEventListener 所以我试着这样写，你帮了我很多，我很喜欢听听你为什么认为它不起作用

JS

const form = document.getElementById('login');
const userName = document.getElementById('userId');
const password = document.getElementById('userPassword');
const enterBtn = document.getElementById('enter');

const allowedUser = 'abcd';
const allowedPwd = '1234';

enterBtn.onclick() = function(){

    if (!userName.value || !password.value) {
      prompt('Please enter user & password');
      return;
    }
    else if (password.value != '1234') {
      prompt('Please enter password');
      return;
    }
    else if (userName.value != 'abcd') {
      prompt('Please enter user');
      return;
    }
    else if (userName.value === allowedUser && password.value === allowedPwd) {
      window.location.href = "/Users/ormor/Desktop/Sudoku%20Project%204/Sudoku%20Project/main/";
    }
    else {
      prompt('the username you entered does not match');
      return;
    }
  }

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <link rel='stylesheet' type='text/css' media='screen' href='ws.css'>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

</head>

<body>
  <div class="container">
    <div class='rows'>


  <form id='login' class='login'>
    <div id='userlogbox' class="login-box">
      <h1>Sudoku</h1>
      <div class="textbox">
        <i class="fas fa-user"></i>
        <input id="userId" type="text" placeholder="username" name="userid">
      </div>

      <div id='passwordbox' class="textbox">
        <i class="fas fa-lock"></i>
        <input id="userPassword" type="password" placeholder="password" name="password">
      </div>

      <button id='enter' type="button" class="btn btn-danger" onclick="validCheck()">Enter</button>
    </div>



  </div>
</div>
  </div>

  </form>
</body>
<script src='ws.js' defer></script>
</html>

CSS


html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding-top: 120px;
    background: url(33v2wnher48y.jpg) no-repeat;
    background-size: 30%;
    background-position: 35px, 35px, 35px, 35px;
}

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

推荐阅读