Question

当我将测试格式作为if语句添加到javascript代码时，它只显示在几分之一秒内有任何错误然后消失。如果我删除测试格式，错误显示正常。这是为什么？

<!DOCTYPE html>
<head>
  <title>Settings</title>

  <style>
      .entry, textarea {
        float: right;
        width: 500px;
        resize: none;
        padding: 1px;
        margin-right: 200px;
    }
  </style>
  </head>
  <body>
    <div id="content">
    <h1 style="margin-top: 0px">Settings</h1>
    <form onSubmit="return checkForm(this)">
        <label for="username" class="label"> Change Username:</label>
        <input type="text" id="username" class="entry"/></br>
        <p class=error id="usernameError"><?php echo $error;?></p>
        <br/>

        <label for="email" class="label"> Change E-mail:</label>
        <input type="email" id="email" class="entry"/> <br/>
        <p class=error id="firstnameError"></p>
        <br/>

        <label for="password" class="label">Change Password:</label>
        <input type="password" id="password" class="entry"/> <br/>
        <p class=error id="passwordError"></p>
        <br/>

        <label for="confirmPassword" class="label">Confirm Password:</label>
        <input type="password" id="confirmpassword" class = "entry"/>
        <br/>
        <p class=error id="confirmpasswordError"></p>
        <br/>

        <label for="address" class="label">Change Address:</label>
        <textarea id = "address" rows="3" class="entry"></textarea><br/><br/><br/><br/>

        <label for="mobile" class="label">Change Mobile Number:</label>
        <input type="tel" id="mobile" class="entry"/> <br/><br/><br/>
        <br/>

        <input type="submit" id="confirm" name="confirm" value="Confirm Changes" style= "font-size: 15px; background: #f5f5f5;
         width: 20%; margin-right: 20%" class="entry" />
    </form>
    </div>
<script type="text/javascript" >
function checkForm(form){  
        var username = document.getElementById("username").value;
        var mailformat = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
        var usernameformat = /^[\w ]+$/;
        var password = document.getElementById("password").value;
        var confirmpassword = document.getElementById("confirmpassword").value;
        var ok = true; 

        if (!usernameformat.test(username))
        {  
            document.getElementById("usernameError").innerHTML = "No symbols please!";
            ok = false;  
        } 

        if (password!=confirmpassword)
        {  
            document.getElementById("passwordError").innerHTML = "Passwords do not match";
            document.getElementById("confirmpasswordError").innerHTML = "Passwords do not match";
            ok = false;  
        }
        if (!mailformat.test(email)) {
             document.getElementById("emailError").innerHTML = "Input a valid email";
                ok = false; 
               }

    return ok;

}

</script>
</body>
</html>

Answer 1

注意<p class=error id="firstnameError"></p>？

<label for="email" class="label"> Change E-mail:</label>
    <input type="email" id="email" class="entry"/> <br/>
    <p class=error id="firstnameError"></p>
    <br/>

应该是：emailError：

<label for="email" class="label"> Change E-mail:</label>
<input type="email" id="email" class="entry"/> <br/>
<p class=error id="emailError"></p>
<br/>

document.getElementById("emailError")未定义，因此当您尝试设置html时，它将失败。

email也未在任何地方定义。如果您要针对电子邮件进行测试，请确保已正确设置变量：

var email = document.getElementById("email").value;

Javascript测试格式如果语句错误

1 个答案: