Joh*_*oea 7 html javascript methods conditional-statements
我不知道如何将以下条件反应链接到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>
这些是我想要关注的一些要点:
- 如果您碰巧知道元素的id,请使用
document.getElementById(id).这是最突出的选择方式,因为通常id对于所有元素都是唯一的.- 如果您碰巧知道元素的类,请使用
document.getElementsByClassName(class).此方法具有一定的风险,因为可能有多个具有相同类的元素.- 如果您碰巧知道元素的tagName,请使用
document.getElementsByTagName(tag).- 实现元素选择的最简单方法是使用
document.querySelector('tag'/ '.class'/ '#id').您可以在这里参考更多有关相同的内容.
passType(),此处验证基于您定义的密码数组的输入密码,只有在用户输入密码并单击登录按钮后才需要调用该函数.
为了实现这一点,你将不得不绑定的提交事件的
EventListener.这可以通过使用来实现document.querySelector('form').addEventListener('submit', passType);
EventListenerevent.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>随意询问您对此有任何疑问.
我猜您是在问如何获取用户在密码字段中输入的值。那是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()，以防止提交表单。看
在 addEventListener 上返回 false 提交仍然提交表单吗？
此外，在客户端 Javascript 中检查密码也不是很安全。没有什么可以阻止用户修改脚本或绕过它。应在服务器上检查密码，以便用户无法覆盖它。