Javascript 为什么即使必填字段为空，也会提交此表单？

我正在使用一个表单，在这个表单中，我从用户那里获取密码输入，然后javascript检查密码是否匹配。但是，即使需要密码，如果输入框为空，表单也会被提交。我正在使用javascript提交表单。虽然我有一个解决问题的方法，但我想问为什么会发生这种情况，而不是

的正常操作，请填写此字段，通常在执行此操作时出现

HTML-

编辑-
我希望当我单击按钮时，密码字段保持为空时会出现这种情况：
因为为了不提交表单，您的函数必须返回false，并进行检查以确保密码不为空，如下所示：

javascript:

function passCheck(){
    var pass1 = document.getElementById('upass').value;
    var pass2 = document.getElementById('reupass').value;
    if(pass1 == pass2 && pass1 != ""){
        return true;
    }
    else{
        alert("Both password inputs do not match. Please retry.");
        document.getElementById('userform').reset();
        return false;
    }
}

html:


用户名：
密码：
重新键入密码：
如果您不想在密码不匹配的情况下提交表单，则必须返回false

这样做：-
返回false

if(pass1!='' && pass2!='')
 {

    if(pass1 == pass2){
            document.getElementById('userform').submit();
        }
        else{
            alert("Both password inputs do not match. Please retry.");
            document.getElementById('userform').reset();
            return false;
        }

}

也

您必须将
input type=“button”
更改为
input type=“submit”

编辑：-

您还必须首先检查密码字段是否为空，如果为空，则显示错误并返回false。请尝试以下代码：

if(pass1 !="" && pass1 != pass2){
    alert("Both password inputs do not match. Please retry.");
    document.getElementById('userform').reset();
    return false;
}
else{
   document.getElementById('userform').submit();
}

编辑
如果您将输入类型更改为
submit
，它将自动检查空约束，并且您仍然可以验证字段

这是因为如果两者都为空

pass1 = NULL pass2 = NULL

这实际上意味着
pass1==pass2

[编辑]
将代码更改为

function passCheck(){
var pass1 = document.getElementById('upass').value;
var pass2 = document.getElementById('reupass').value;
if((pass1 == pass2) && (pass1!="")){
    document.getElementById('userform').submit();
}
else{
    alert("Both password inputs do not match. Please retry.");
    document.getElementById('userform').reset();
}
}

你需要

<form action="check.php" method="POST" id="userform" onsubmit="return validate()" >
    USERNAME:<input name="uname" id="uname" type="text" required />
    PASSWORD:<input type="password" id="upass" name="upass" type="text" required />
    RETYPE PASSWORD:<input type="password" id="reupass" name="reupass" type="text" required />
    <input type="submit" value="Submit" />
</form>

演示：
请解释。未使用
document.getElementById（'userform'）.submit（）与单击提交相同button@Sid我已经更新了我的答案。Submit（）确实与单击Submit按钮相同，但除非onclick函数返回false，否则表单仍将提交：-）@Max，您不需要返回false。我在没有返回的情况下进行了测试，结果正常perfectly@RishiDua否，如果发生onSubmit事件，则需要返回false。。。我也一样，使用表单的推荐onSumbit事件，这比使用按钮并调用submit（）简单得多，但如果两个密码字段都为空，则
pass1==pass2
也为true，表单将提交pass1！=“”将处理它我认为OP使用的是
type=“button”
type=“submit”按钮不会在这里提交表单，这与任何条件无关，因为您已使用onclick=“passCheck（）”覆盖了操作。默认操作发生在passCheck（）之后。如果不返回false，请不要将侦听器放在提交按钮上，将其放在表单的提交处理程序上。可以通过多种方式提交表单，而无需单击“提交”按钮。此外，您还可以将表单引用为
document.forms.userform
。最后，仅仅因为用户犯了一个错误而重置表单是不好的，让他们自己来修复它。此外，您仍然需要在服务器端验证这些值。您不能依赖JavaScript验证，因为它可以关闭，也可以从浏览器外部发送表单值。但当您使用HTML提交表单时不会发生这种情况。当我们使用JavaScript时，两个变量是相等的，即使它们为null。很抱歉，我没有理解您所说的使用html提交表单是什么意思？我的意思是：
，这是因为required标记仅适用于html提交选项。由于您是使用document.getElementById（'userform'）.submit（）手动提交的，因此需要检查密码字段是否为空。但我希望该标记显示为
type=“button”
不会提交表单。这样做有效，如果字段为空，我还可以看到
请填写此字段的提示。感谢you@Sid，如果您不想对“提交”按钮执行任何操作，为什么要使用onclick=“passCheck（）”？我为您提供了JavaScript解决方案，假设passCheck（）有更多的代码行（为了简单起见，您在这里删除了其他一些代码行），如果我将input type=“button”更改为input type=“submit”，那么我将无法验证密码输入是否匹配，表单将被删除submitted@Sid对你可以看看我的答案。是的，您可以看到，如果您在密码不匹配时返回false，则表单将不会提交；如果密码匹配，则表单将自动提交您的表单，因为您没有返回false
pass1 = NULL pass2 = NULL

function passCheck(){
var pass1 = document.getElementById('upass').value;
var pass2 = document.getElementById('reupass').value;
if((pass1 == pass2) && (pass1!="")){
    document.getElementById('userform').submit();
}
else{
    alert("Both password inputs do not match. Please retry.");
    document.getElementById('userform').reset();
}
}

<form action="check.php" method="POST" id="userform" onsubmit="return validate()" >
    USERNAME:<input name="uname" id="uname" type="text" required />
    PASSWORD:<input type="password" id="upass" name="upass" type="text" required />
    RETYPE PASSWORD:<input type="password" id="reupass" name="reupass" type="text" required />
    <input type="submit" value="Submit" />
</form>

function validate(){
    var pass1 = document.getElementById('upass').value;
    var pass2 = document.getElementById('reupass').value;
    var username= document.getElementById('uname').value;
    if(username == ""){
        alert('user name cannot be empty')
        return false
    }

    if(pass1 == ""){
        alert('password cannot be empty')
        return false
    }

    if(pass1 != pass2){
        alert("Both password inputs do not match. Please retry.");
        return false;
    }

    return true
}