Question

我一直在尝试制作一个简单的登录系统（本地），但我有点困惑..如何将用户写入文本字段的输入打印在控制台中并将其存储在变量中？

我的 HTML 代码：

<!DOCTYPE html>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="username.js"></script>
    <script src="password.js"></script>
</head>
<body>
    <title>Login #1</title>
    <h2>Simple login system</h2>
    <form name="">
        <label for="text1">Username:</label>
        <input type="text" name="text1">
        <label for="text2">Password:</label>
        <input type="text" name="text2">
        <button onclick="password(), username()">login</button> 
    </form>
</body>
</html>

对于我的 JS，我希望在单独的文件中分别检查 ''password() 和 username()'' 函数。

JS 密码文件：

const Psword = 'Password9' //just an example

function password() {
    console.log(Psword)
    // if (user input from password field) = Psword
    // alert('Login sucessfull redirecting!)
    // else{
    // alert('Username or password are incorrect')    
    // }
}

JS 用户名文件：

var Username = 'Subject09'

function username() {
    console.log(Username)
    // if (user input from username field) = Username
    // alert('Login sucessfull redirecting!)
    // else{
    // alert('Username or password are incorrect')    
    // }
}

编辑：添加了我的 JS 代码。（注意：我已将我的代码拆分为 2 个不同的 JS 文件，因为我只是希望结果简单。）

Answer 1

我们可以使用 onsubmit 事件提交表单。

更新：我正在向您展示表单提交方法。

const form = document.querySelector("form");

form.addEventListener("submit",(e)=>{
e.preventDefault();


 if(form["text1"].value && form["text2"].value){
console.log("Submitted the form");
   form.reset();
 }else{
console.log("Provide required values");
 }
})

<!DOCTYPE html>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="username.js"></script>
    <script src="password.js"></script>
</head>
<body>
    <title>Login #1</title>
    <h2>Simple login system</h2>
  <form>
    <div>
      <label>Username:</label>
      <input type="text" name="text1" >
    </div>
    
    <div>
      <label>Password:</label>
      <input type="text" name="text2">
    <div>
    
    <button type="submit">login</button> 
  </form>
</body>
</html>

Answer 2

为您的输入和按钮设置 ID。您可以通过向按钮添加 type="button" 来阻止提交。

只需在按钮上设置一个 onclick 事件，即可获取输入值。

<body>
 <title>Login #1</title>
 <h2>Simple login system</h2>
 <form>
    <label for="text1">Username:</label>
    <input type="text" name="text1" id="username">
    <label for="text2">Password:</label>
    <input type="text" name="text2" id="password">
    <button type="button" id="submitBtn">login</button> 
 </form>

window.onload = function() {
  document.getElementById('submitBtn').addEventListener('click', onSubmit);
}


function onSubmit() {
  console.log(document.getElementById('username').value);
  console.log(document.getElementById('password').value);

  // Do what you want with data

  // You can submit with .submit()
  document.forms['form'].submit();
}

如何从文本字段打印输入？

2 个答案: