Question

我不知道如何将以下条件反应链接到 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>

Answer 1

我想关注的是一些要点：

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

为了实现这一目标，您必须绑定提交事件到EventListener。这可以通过使用document.querySelector('form').addEventListener('submit', passType);
来实现

现在最后，根据您提供的代码段，您希望为用户提供第二次机会，以防用户在第一次尝试时输入错误的密码。为此，您必须在变量中存储 尝试计数。此外，提交操作按钮的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 2

我猜你问的是如何获取用户输入密码字段的值。那是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 3

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

dataset <- data.frame(TotalHeadcount = c(-417, -12, 276, -276, 787, 14), Category =  LETTERS[1:6])
dataset$SortedCategory <- factor(dataset$`Category`, levels = dataset$`Category`)
dataset$id <- seq_along(dataset$TotalHeadcount)
dataset$type <- ifelse(dataset$TotalHeadcount > 0, "in",   "out")
dataset[dataset$SortedCategory %in% c("A", "F"), "type"] <- "net"
dataset$type <- factor(dataset$type, levels = c("out", "in", "net"))
dataset$end <- cumsum(dataset$`TotalHeadcount`)
dataset$end <- c(head(dataset$end, -1), 0)
dataset$start <- c(0, head(dataset$end, -1))
dataset$value <-dataset$`TotalHeadcount`
library(ggplot2)
strwr <- function(str) gsub(" ", "\n", str)
ggplot(dataset, aes(fill = type))+ geom_rect(aes(x = SortedCategory,  xmin = id - 0.45, xmax = id + 0.45, ymin = end,   ymax = start))+ scale_x_discrete("", breaks = levels(dataset$SortedCategory), labels = strwr(levels(dataset$SortedCategory)))+ theme_bw()+ theme(panel.border = element_blank(), panel.grid.major = element_blank(), axis.line = element_line(colour = "gray"))+guides(fill=FALSE)

然后聆听let frm = document.querySelector('form');事件。

submit

如何访问输入密码？

您需要更改功能。首先将以下内容添加到＆＃34; passType＆＃34;的顶部。功能。以下代码段将用户输入保存到变量frm.addEventListener('submit', passType);。

pass

现在将let p = frm.querySelector('#passid');//Get the DOM node let pass = p.value;//Get the input value修改为if (password.indexOf > -1)以检查实际输入。

<强>样本

＆＃13;

if (password.indexOf(pass) > -1)

＆＃13;

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

如何将我的表单与document.querySelector相关联？

4 个答案: