我正在尝试制作一个注册表单,其中有一个用于确认您的密码的文本框。
<!DOCTYPE html>
<html>
<head>
<style>
label {
display: inline-block;
width: 100px;
margin-bottom: 10px;
}
body {
font-family: sans-serif;
}
</style>
<title>Register</title>
</head>
<body>
<h2>Register</h2>
<form method="post" action="">
Username:<br>
<input type="text" name="username"><br><br> Email Addres: <br>
<input type="text" name="email"><br><br> Password:
<br>
<input type="text" name="password"><br><br> Confirm Password:<br>
<input type="text" name="passwordconf" onkeyup="passVal()"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
<script>
var pass = document.getElementsByName("password");
var confPass = document.getElementsByName("passwordconf");
function passVal() {
if (pass.value != confPass.value) {
confPass.setCustomValidity("Passwords don't match");
} else {
confPass.setCustomValidity("");
}
}
</script>
其目的是,每当释放一个键(onkeyup)时,就会运行一个函数来检查文本框的内容是否相等(passVal)。当我运行它时,将文本添加到两个密码框中,控制台中会显示错误,指出 passVal 未定义。
我尝试使 passval 等于变量
var variableExample = passVal;
并使用onkeyup来调用变量,但这没有什么区别。除了现在控制台说未定义variableExample而不是passVal。我不知道为什么这不起作用。有人知道我该如何解决这个问题吗?
最佳答案
<!DOCTYPE html>
<html>
<head>
<style>
label {
display: inline-block;
width: 100px;
margin-bottom: 10px;
}
body {
font-family: sans-serif;
}
</style>
<title>Register</title>
</head>
<body>
<h2>Register</h2>
<form method="post" action="">
Username:<br>
<input type="text" name="username"><br><br> Email Addres: <br>
<input type="text" name="email"><br><br> Password:
<br>
<input type="text" name="password"><br><br> Confirm Password:<br>
<input type="text" name="passwordconf" onkeyup="passVal()"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
<script>
var pass = document.getElementsByName("password")[0];
var confPass = document.getElementsByName("passwordconf")[0];
function passVal() {
if (pass.value != confPass.value) {
console.log('Not equal');
} else {
console.log('Equal');
}
}
</script>
如果通过.getElementsByName()
查询,您将获得一个元素数组,如 .getElementsByTagName()
一样。 。请注意,“Element”是复数。
如果你只想要一个元素,只需使用 .getElementsById()
.
关于javascript - 当我在 HTML 中对 JS 函数使用 onkeyup 时,为什么控制台显示我的函数未定义?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49185238/