如何将条件反应与 document.querySelector 关联？答案

【问题标题】：How to associate condition-reaction with document.querySelector?如何将条件反应与 document.querySelector 关联？
【发布时间】：2016-01-19 15:21:36
【问题描述】：

我不知道如何将以下条件反应链接到 passid 表单输入 ID：
我不知道将 document.querySelector() 方法放在哪里，以便索引的 contion-reactions 将与之关联。

代码如下：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Password - form</title>
    </head>

    <body>

        <form>
            <label>Password</label>
            <input type="password" id="passid" />
            <br>
            <input type="submit" value="Sign In" />
        </form>

        <script>

            function passType() {
                var password = ["p1", "p2", "p3", "p4", "p5"];

                if (password.indexOf > -1) {
                    alert("That's great! Thank you!");
                } else {
                    alert("Wrong, try again");
                }

                if (password.indexOf > -1) {
                    alert("It's wrong, you have one more try...");
                } else {
                    alert("Get out now!");
                    window.close();
                }
            }
        passType();

    </script>
    </body>
</html>

这应该怎么做？

【问题讨论】：

password.indexOf 想做什么？（它不会按照你的方式工作。）
之前有一个“提示”，但我现在添加了一个表单并尝试通过 querySelector 将脚本与表单相关联。我是 JS 新手 --- 我认为 password(var).indexOf 只是指变量。
你检查过 Barmar 的回答吗？

标签： javascript html methods conditional-statements

【解决方案1】：

这些是我想要关注的几点：

要使用查询选择器选择特定元素，请记住以下几点：
- 如果您碰巧知道元素的 id，请使用document.getElementById(id)。这是最突出的选择方式，因为通常 id 对于所有元素都是唯一的。
- 如果您碰巧知道元素的类，请使用document.getElementsByClassName(class)。这种方法有一定的风险，因为可能有多个元素具有相同的类。
- 如果您碰巧知道元素的 tagName，请使用document.getElementsByTagName(tag)。
- 实现元素选择的最简单方法是使用document.querySelector('tag'/ '.class'/ '#id')。您可以refer here 了解更多信息。
现在，您需要了解您的函数passType()，这里验证根据您定义的密码数组输入的密码，需要在用户之后调用已输入密码并点击登录按钮。

为了实现这一点，您必须将 submit 事件绑定到EventListener。这可以通过使用document.querySelector('form').addEventListener('submit', passType);来实现
最后，根据您提供的代码 sn-p，您希望给用户一个第二次机会，以防用户在第一次尝试时输入错误的密码。为此，您必须在变量中存储 尝试计数。另外，提交操作按钮的EventListener一直冒泡，为了防止冒泡，需要使用event.preventDefault()

记住这一切，我相信这会解决您的问题。这是修正后的代码 sn-p ：

<!doctype html>
<html>

<head>
<meta charset="utf-8">
<title>Password - form</title>
</head>

<body>

<form>
<label>Password</label>
<input type="password" id="passid"/>
<br>
<input type="submit" value="Sign In"/>
</form>

<script>

var attemptCount = 0;

function passType(event) {
    event.preventDefault();
    var enteredValue = document.querySelector('form').querySelector('#passid').value;
    var password = ['p1', 'p2', 'p3', 'p4', 'p5'];

    if (password.indexOf(enteredValue) > -1) {
        alert("That's great! Thank you!");
    }
    else {
        attemptCount++;
        alert('Wrong, try again');
        if (attemptCount <= 1) {
            alert("It's wrong, you have one more try...");
            document.querySelector('form').querySelector('#passid').value = '';
        } else {
            alert('Get out now!');
            window.close();
        }
    }
}

document.querySelector('form').addEventListener('submit', passType);

</script>

</body>

</html>

如有任何疑问，请随时提出。

【讨论】：

【解决方案2】：

如何使用查询选择器访问表单？

let frm = document.querySelector('form');

然后监听它的submit 事件。

frm.addEventListener('submit', passType);

如何获取输入的密码？

您需要对函数进行更改。首先将以下内容添加到“passType”函数的顶部。下面的 sn -p 将用户输入保存到变量pass中。

let p = frm.querySelector('#passid');//Get the DOM node
let pass = p.value;//Get the input value

现在将if (password.indexOf > -1) 修改为if (password.indexOf(pass) > -1) 以检查实际输入。

演示

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Password - form</title>
</head>

<body>

  <form>
    <label>Password</label>
    <input type="password" id="passid" />
    <br>
    <input type="submit" value="Sign In" />
    <!-- We also have input type = "button" and events for both >>> onsubmit & onclick. -->
  </form>

  <script>
    function passType() {
      let p = frm.querySelector('#passid');
      let pass = p.value;
      var password = ["p1", "p2", "p3", "p4", "p5"];

      if (password.indexOf(pass) > -1) {
        alert("That's great! Thank you!");
      } else {
        alert("Wrong, try again");
        if (password.indexOf(pass) > -1) {
          alert("It's wrong, you have one more try...");
        } else {
          alert("Get out now!");
          window.close();
        }
      }

    }

    let frm = document.querySelector('form');
    frm.addEventListener('submit', passType);
  </script>

</body>

</html>

【讨论】：

这个答案只给用户一次输入密码的机会。我相信@JohnDoea 想在发出“立即离开”的警报之前再给用户一次尝试。请尝试更新此答案。

【解决方案3】：

我猜您是在问如何获取用户在密码字段中输入的值。那是document.getElementById("passid").value。所以你会写：

if (password.indexOf(document.getElementById("passid").value) > -1) {
    alert("That's great! Thank you!");
}

请注意，在脚本的顶层调用 passType() 将不起作用。这将在页面首次加载时运行，而不是等待用户填写密码。您应该在用户提交表单时调用它。你应该这样做：

document.querySelector("form").addEventListener("submit", passAll);

您还应该更改passAll() 函数，以便在用户输入错误密码时调用Event.preventDefault()，以防止提交表单。见

return false on addEventListener submit still submits the form?

此外，在客户端 Javascript 中检查密码也不是很安全。没有什么可以阻止用户修改脚本或绕过它。应该在服务器上检查密码，以便用户无法覆盖它。

【讨论】：

【解决方案4】：

如果您正在寻找一种在提交表单时使用密码字段执行某些操作的方法，您可能需要以下内容：

// listen for submit events on the form
document.querySelector('form').addEventListener('submit', doSubmit);

// our form submit handler
function doSubmit(event) {
  
  // prevent submission
  event.preventDefault();
  event.stopPropagation();
  
  // get the password field
  // event.target is the form
  // could alternatively query by id using document.getElementById('passid')
  var passwordField = event.target.querySelector('#passid');
  
  // do something with the field or its value
  console.log(passwordField.value);
  
  return false;
}

<form>
  <label>Password</label>
  <input type="password" id="passid" />
  <input type="submit" value="Sign In" />
</form>

【讨论】：