3

我正在使用一种表单，在该表单中，我从用户那里获取密码输入，然后 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

4

5 回答 5

5

因为为了不提交表单，您的函数必须返回 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>
于 2013-06-18T06:14:42.197 回答
3

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

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();
}
}
于 2013-06-18T06:19:49.620 回答
0

如果您不想在密码不匹配的情况下提交表单，那么您必须返回 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

于 2013-06-18T06:16:05.393 回答
0

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

这是 SUBMIT 类型的演示

于 2013-06-18T06:18:40.610 回答
0

你需要

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

演示：小提琴

于 2013-06-18T06:26:32.100 回答