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

Question

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

这里是代码：

<!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>

应该怎么做？

Answer 1

我猜您在问如何获取用户在密码字段中键入的值。那是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中检查密码也不是很安全。没有什么可以阻止用户修改脚本或绕过脚本。应该在服务器上检查密码，以便用户无法覆盖它。

Answer 2

这些是一些要点，我想重点关注：

要使用查询选择器选择特定元素，请记住以下几点：
- 如果您碰巧知道元素的id，请使用document.getElementById(id)。这是最突出的选择方式，通常id对于所有元素都是唯一的。
- 如果您碰巧知道元素的class，请使用document.getElementsByClassName(class)。此方法具有一定的风险，因为相同的class可能有多个元素。
- 如果您碰巧知道元素的tagName
- 实现元素选择的最简单方法是使用document.querySelector('tag'/ '.class'/ '#id')。您可以refer here来获得几乎相同的更多信息。
现在，您需要了解您的函数passType()（在此验证

仅在用户输入密码并单击登录按钮。
为了实现这一点，您必须将submit事件bind

EventListener

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

现在，最后，根据您提供的代码片段，您希望为用户提供第二次机会

存储

尝试计数。另外，submit

EventListener

event.preventDefault()

牢记所有这些，我相信这会解决您的问题。这是更正的代码段：

<!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>

随时询问与您相同的任何问题。

Answer 3

4
投票

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

Answer 4

如果您正在寻找一种在表单提交时使用密码字段进行操作的方法，则可能需要遵循以下几条规则：

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

问题描述投票：7回答：4

4个回答

最新问题

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

问题描述 投票：7回答：4

4个回答

最新问题

问题描述投票：7回答：4