如何使用 javascript 检查表单数据，然后重定向到第二个 html 文件？

Question

我使用 electron 和 node.js 制作了一个登录界面。我想做的是用户在表单中输入正确的数据，然后在按下按钮后提交他输入的所有数据将被检查，如果用户输入正确的数据，他将被引导到第二个。html 文件名为 second.html。我试过了，但没有任何结果。

这是js代码：

const electron= require('electron');
const {app, BrowserWindow}=electron;
let loginWindow;
let mainWindow;
app.on('ready',()=>{
loginWindow=new BrowserWindow({});
loginWindow.loadURL(`file://${__dirname}/index.html`);
});

这是 index.html 代码：

<!DOCTYPE html>
<html>
<head>
  <meta chaset="utf-8">
  <link rel="stylesheet" href ="css1.css">
  <title></title>
</head>
<body>
<div class="center">
  
  <form metod="post">
      <div class="txt_field">
          <input id="username" type="text" required>

          <label>Username</label>
      </div>
      <div class="txt_field">
          <input id="password" type="password" required>

          <label>Password</label>
      </div>
      <div class="pass">Forgot Password?</div>
      <input onclick="press" type="submit" id="submit" value="Login">
      <div class="signup_link">
        Not a member?<a href="#">Sing up </a>
      </div>
  </form>
</div>
</body>
<script src="main.js">
  require('./renderer.js');
  function press(){
    var username=document.getElementById("username");
    var password=document.getElementById("password");
    if(username==1 && password==1)
    window.open('second.html');
  }
</script>

如您所见，我尝试自己执行此操作，但没有成功。

Answer 1

目前您正在比较两个输入，它们都是对象。您需要做的是获取每个输入的 value 属性并比较这些值。

function press(){
  var username = document.getElementById("username").value;
  var password = document.getElementById("password").value;
  
  if (username == 1 && password == 1) {
    window.open('second.html');
  }
}

免责声明：让后端处理登录

前端在登录方面非常不安全。你说你有一个 Node.js 服务器。将表单发送到端点，检查值，然后重定向用户。前端的任何内容都可以被用户读取，因此是不安全的。

话虽这么说；

表单仍会提交并重新加载页面。您应该做的是监听 submit 事件。只要单击提交按钮，就会触发该事件。当该事件触发时，阻止表单提交并调用评估值的函数。请参阅下面的示例。

<form id="login-form" method="post">
  <div class="txt_field">
    <label for="username">Username</label>
    <input id="username" type="text" required>
  </div>

  <div class="txt_field">
    <label for="password">Password</label>
    <input id="password" type="password" required>
  </div>
  
  <div class="pass">Forgot Password?</div>
    <input type="submit" id="submit" value="Login">
    <div class="signup_link">
      Not a member? <a href="#">Sign up</a>
    </div>
  </div>
</form>

const loginForm = document.getElementById('login-form');

loginForm.addEventListener('submit', function(event) {
  press(); // Evaluate the values.
  event.preventDefault(); // Prevent form from submitting.
});

Answer 2

您可以使用字段名称来获取提交时的值。

      <div class="txt_field">
          <input id="username" name="username" type="text" required>
          <label>Username</label>
      </div>
      <div class="txt_field">
          <input id="password" name="password" type="password" required>
          <label>Password</label>
      </div>


document.getElementById("login-form").elements["username"].value
document.getElementById("login-form").elements["password"].value

建议您使用字段名称而不是 Id，因为它是在 post 请求中作为表单数据发送的字段名称和值。

如何使用 javascript 检查表单数据，然后重定向到第二个 html 文件？

How can I check the data of a form using javascript and then redirected to a second html file?

javascript

node.js

electron

electron-builder

免责声明：让后端处理登录