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

Question

我正在使用一个表单，在该表单中我获取用户输入的密码，然后 javascript 检查密码是否匹配。但即使需要密码，如果输入框留空，表单也会被提交。我正在使用 javascript 提交表单。虽然我有解决问题的方法，但我想问为什么会发生这种情况，而不是正常的操作Please fill in this field，通常在这样做时出现。

HTML-

<form action="check.php" method="POST" id="userform">
USERNAME:<input name="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="button" value="Submit" onclick="passCheck()">
</form>

JavaScript-

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

编辑-我希望当我单击按钮并且密码字段留空时应该出现此内容： https: //i.stack.imgur.com/cGuCK.jpg

Answer 1

因为为了不提交表单，您的函数必须返回 false，并检查以确保密码不为空，如下所示：http ://jsfiddle.net/upgradellc/Heay3/5/

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:

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