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

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();
}
}

编辑- 我希望当我单击按钮并且密码字段留空时应该出现这个：http://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>

Answer 2

那是因为如果两者都是空白

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();
}
}

Answer 3

如果密码不匹配不想提交表单，则必须返回 false

这样做：- return 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

Answer 4

Here is working JsFiddle Demo。试试这个代码：

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，它将自动检查空约束，您仍然可以验证字段

Here is Demo with type SUBMIT

Answer 5

你需要

<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
}

演示：Fiddle