Javascript测试格式If语句错误_Javascript

Javascript测试格式If语句错误

javascript

Javascript测试格式If语句错误,javascript,Javascript,当我将测试格式作为if语句添加到javascript代码中时，它只会在几秒钟内显示出任何错误，然后消失。如果我删除了测试格式，错误会显示得很好。为什么会这样 <!DOCTYPE html> <head> <title>Settings</title> <style> .entry, textarea { float: right; width: 500px; resi

当我将测试格式作为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>


设置
.输入，文本区{
浮动：对；
宽度：500px；
调整大小：无；
填充：1px；
右边距：200px；
}
设置
更改用户名：





更改电子邮件：





更改密码：





确认密码：





更改地址：






更改手机号码：






函数检查窗体（窗体）{
var username=document.getElementById（“用户名”）.value；
var mailformat=/^（[A-Za-z0-9\-\.]）+\@（[A-Za-z0-9\-\.]）+\.（[A-Za-z]{2,4}）$/；
var usernameformat=/^[\w]+$/；
var password=document.getElementById（“密码”）.value；
var confirmpassword=document.getElementById（“confirmpassword”）.value；
var-ok=true；
如果（！usernameformat.test（用户名））
{  
document.getElementById（“usernameError”）.innerHTML=“请不要使用符号！”；
ok=假；
} 
如果（密码！=确认密码）
{  
document.getElementById（“passwordError”）.innerHTML=“密码不匹配”；
document.getElementById（“confirmpasswordError”）.innerHTML=“密码不匹配”；
ok=假；
}
如果（！mailformat.test（电子邮件））{
document.getElementById（“emailError”）.innerHTML=“输入有效电子邮件”；
ok=假；
}
返回ok；
}

注意

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

document.getElementById（“emailError”）

未定义，因此当您尝试设置html时，它将失败

电子邮件

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

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

阅读您的错误控制台：

uncaughttypeerror:无法将属性'innerHTML'设置为null

我知道它的格式不好。但是为了解决这个问题，它最终被嵌入到脚本标记之间的HTML文件中。另外，

email

在任何地方都没有定义。那会扔error@ewizard否，如果返回的值不正确，则不会提交表单。@ewizard否，如果验证函数返回的值真实，则会提交表单。还有其他错误（在评论和（至少部分）正确答案中注明）导致电子邮件验证无法进行。不是我，但人们确实倾向于对拼写错误的答案投反对票。打字错误通常是一票否决。在这种情况下，这不仅仅是一个打字错误，而是一个基本的错误。这是完美的。我真不敢相信我没听懂。下次我也会使用JS错误控制台（不知道它存在）。对不起，谢谢你…三张反对票。你们这些人疯了。当然有一些简单的错误，但是我提供了一个解决方案，以及为什么每个错误都会发生的原因。不要敲我，敲OP.-1，因为这不是应该回答的问题类型-堆栈溢出不是调试服务，不要让它看起来像one@nicael然后对问题投否决票，忽略答案。惩罚那些试图帮助别人的人是不酷的。

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