Question

我正在尝试让用户输入其信息以进行注册。我遇到一个错误，看起来我知道错误是什么，但我不知道如何解决。请有人帮忙。

未捕获的TypeError：无法在HTMLInputElement.onclick的signUpValidate（fhe.js：26）处读取null的属性“值”

HTML代码：

<!DOCTYPE html>
<html lang="en">`enter code here`
<head>
    <script type="text/javascript" src="fhe.js"></script>
    <link rel="stylesheet" href="fheCss.css"/>
    <meta charset="UTF-8">
    <title>Sign Up Page</title>
    <h1>Family Home Evening</h1>
    <h3>Sign Up</h3>
</head>
<body class="backgroundPic">
<form class="mySignUpForm">
    <input type="text" placeholder="First Name" name="firstName" required/><br><br>
    <input type="text" placeholder="Last Name" name="lastName" required/><br><br>
    <input type="text" placeholder="Username" name="signUpUserName" pattern="^[a-zA-Z][a-zA-Z0-9-_\.]{8,20}$" required/><br><br>
    <input type="text" placeholder="Password" name="signUpPassword" pattern="(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$" required/><br><br>
    <input type="text" placeholder="Verify Password" name="signUpVerPassword" pattern="(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$" required/><br><br>

    <input type="button" value="Sign up" id="signup" onclick="signUpValidate()"/><br><br>
    <a href="login.html">Back to Login</a><br><br>
</form>

<h4>Username: Username must be between 8 to 20 character<br><br>
    Password: Password must contain 1 uppercase, lowercase and number</h4><br><br>
</body>
</html>

JS代码：

var signUpAttempt = 3;
function signUpValidate() {
    var firstName = document.getElementById("firstName").value;
    var lastName = document.getElementById("lastName").value;
    var signUpUserName = document.getElementById("signUpUserName").value;
    var signUpPassword = document.getElementById("signUpPassword").value;
    var signUpVerPassword = document.getElementById("signUpVerPassword").value;
    if (firstName == "Ashish" &&
        lastName == "Pokhrel" &&
        signUpUserName == "ashishpokhrel" &&
        signUpPassword == "ashishpokhrel69" &&
        signUpVerPassword == "ashishpokhrel69"){
        alert("Signed Up Successful");
        window.location = "login.html";
        return false;
    }
    else {
        signUpAttempt --;
        alert("Please fill out correct input." + "You have " + signUpAttempt + "attempt.");

        if(signUpAttempt == 0){
            document.getElementById("firstName").disabled = true;
            document.getElementById("lastName").disabled = true;
            document.getElementById("signUpUserName").disabled = true;
            document.getElementById("signUpPassword").disabled = true;
            document.getElementById("signUpVerPassword").disabled = true;
            document.getElementById("signup").disabled = true;
            return true;
        }
    }
}

Answer 1

您正在使用document.getElementById来获取元素，但尚未在元素本身（在HTML中）定义ID。请注意，元素的名称与其ID不同。

Answer 2

您正在使用document.getElementById()从表单中获取值，但尚未在输入元素中提供id属性。

<input type="text" id="firstName" placeholder="First Name" name="firstName" required/><br><br>
<input type="text" id="lastName" placeholder="Last Name" name="lastName" required/><br><br>
<input type="text" id="signUpUserName" placeholder="Username" name="signUpUserName" pattern="^[a-zA-Z][a-zA-Z0-9-_\.]{8,20}$" required/><br><br>
<input type="text" id="signUpPassword" placeholder="Password" name="signUpPassword" pattern="(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$" required/><br><br>
<input type="text" id="signUpVerPassword" placeholder="Verify Password" name="signUpVerPassword" pattern="(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$" required/><br><br>

Answer 3

问题是，您正在尝试获取getElementById，但是没有具有该ID的元素，因此您需要在所有试图从中获取数据的输入字段上添加一个ID

<!DOCTYPE html>
<html lang="en">`enter code here`
<head>
    <script type="text/javascript" src="fhe.js"></script>
    <link rel="stylesheet" href="fheCss.css"/>
    <meta charset="UTF-8">
    <title>Sign Up Page</title>
    <h1>Family Home Evening</h1>
    <h3>Sign Up</h3>
</head>
<body class="backgroundPic">
<form class="mySignUpForm">
    <input type="text" placeholder="First Name" name="firstName"  id="firstName" required/><br><br>
    <input type="text" placeholder="Last Name" name="lastName" id="lastName" required/><br><br>
    <input type="text" placeholder="Username" name="signUpUserName" id="signUpPassword" pattern="^[a-zA-Z][a-zA-Z0-9-_\.]{8,20}$" required/><br><br>
    <input type="text" placeholder="Password" name="signUpPassword" id="signUpPassword" pattern="(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$" required/><br><br>
    <input type="text" placeholder="Verify Password" name="signUpVerPassword" id="signUpVerPassword" pattern="(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$" required/><br><br>

    <input type="button" value="Sign up" id="signup" onclick="signUpValidate()"/><br><br>
    <a href="login.html">Back to Login</a><br><br>
</form>

<h4>Username: Username must be between 8 to 20 character<br><br>
    Password: Password must contain 1 uppercase, lowercase and number</h4><br><br>
</body>
</html>

未捕获的TypeError：无法在HTMLInputElement.onclick的signUpValidate（fhe.js：26）处读取null的属性“值”

3 个答案: