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

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

5 个答案:

修改