Question

我正在开发一个允许用户更改密码的系统。很简单，但它没有按预期工作。现在已经批准了，我刚开始学习JavaScript，所以在我的结尾可能是一个简单的错误。似乎无视JavaScript并提交。如果我删除了我的代码，只是将return false;放在函数的块中，它就不会提交。如果我重新放入我的代码，它似乎忽略了我告诉它返回并提交的内容。

现在我只是将表单放在一起，然后在基础完成后我会处理它的数据库/ php端。我希望他们输入旧密码，新密码，并确认新密码。提交后，我希望JavaScript验证每个框以确保它不为空/ null，然后比较新的通过/确认通过以确保它们在提交之前匹配。我知道我可以利用HTML的“必需”属性作为输入框的一部分，我可以轻松地用PHP完成所有这些，但是因为我正在学习JavaScript，所以我想练习这种方法。

提前致谢！

HTML

<form name="frmChangePass" action="UserSettings.php" method="post" onsubmit="return validatePass()">
        <span>Change Password</span><br>

        <input type="password" name="oldPassword" id="oldPassword">
        <input type="password" name="newPassword" id="newPassword">
        <input type="password" name="confirmPassword" id="confirmPassword">
        <div style="display: none" id="passMismatch"></div>

        <input type="submit" name="submitPass" value="Submit" id="submitPass">

    </form>

的JavaScript

<script>
    function validatePass() {
        var nP = document.getElementById("newPassword").Value;
        var cP = document.getElementById("confirmPassword").Value;
        var oP = document.getElementById("oldPassword").Value;
        var allowSubmit = false;

        if (oP == null || oP == "") {
            document.getElementById("passMismatch").innerHTML = "Please input your current password!";
            document.getElementById("passMismatch").style.display = block;
            allowSubmit = false;
        } else if (nP == null || nP == "") {
            document.getElementById("passMismatch").innerHTML = "Please input a new password!";
            document.getElementById("passMismatch").style.display = block;
            allowSubmit = false;
        } else if (cP == null || cP == "") {
            document.getElementById("passMismatch").innerHTML = "Please confirm new password!";
            document.getElementById("passMismatch").style.display = block;
            allowSubmit = false;
        } else if (cP != nP) {
            document.getElementById("passMismatch").innerHTML = "New password mismatch! Try again.";
            document.getElementById("passMismatch").style.display = block;
            allowSubmit = false;
        }
        else {
            document.getElementById("passMismatch").style.display = none;
            allowSubmit = true;
        }

        return allowSubmit;
    }
</script>

Answer 1

您可以使用form关键字将onsubmit传递给javascript this回调。它使您可以从代码中提交表单。

试试这个：

<form name="frmChangePass" action="UserSettings.php" method="post" onsubmit="validatePass(this); return false;">
    <span>Change Password</span><br>
    <input type="password" name="oldPassword" id="oldPassword">
    <input type="password" name="newPassword" id="newPassword">
    <input type="password" name="confirmPassword" id="confirmPassword">
    <div style="display: none" id="passMismatch"></div>
    <input type="submit" name="submitPass" value="Submit" id="submitPass">
</form>

JS：

<script>
    function validatePass(f) {
        var nP = document.getElementById("newPassword").value;
        var cP = document.getElementById("confirmPassword").value;
        var oP = document.getElementById("oldPassword").value;
        var allowSubmit = false;

        if (oP == null || oP == "") {
            document.getElementById("passMismatch").innerHTML = "Please input your current password!";
            document.getElementById("passMismatch").style.display = "block";
            allowSubmit = false;
        } else if (nP == null || nP == "") {
            document.getElementById("passMismatch").innerHTML = "Please input a new password!";
            document.getElementById("passMismatch").style.display = "block";
            allowSubmit = false;
        } else if (cP == null || cP == "") {
            document.getElementById("passMismatch").innerHTML = "Please confirm new password!";
            document.getElementById("passMismatch").style.display = "block";
            allowSubmit = false;
        } else if (cP != nP) {
            document.getElementById("passMismatch").innerHTML = "New password mismatch! Try again.";
            document.getElementById("passMismatch").style.display = "block";
            allowSubmit = false;
        }
        else {
            document.getElementById("passMismatch").style.display = "none";
            allowSubmit = true;
        }

        if(allowSubmit) {
            f.submit();
        }
    }
</script>

Answer 2

我发现了几件事

使用值而非值
在块周围放置引号，没有

<script>
    function validatePass() {
        var nP = document.getElementById("newPassword").value;
        var cP = document.getElementById("confirmPassword").value;
        var oP = document.getElementById("oldPassword").value;
        var allowSubmit = false;

        if (oP == null || oP == "") {
            document.getElementById("passMismatch").innerHTML = "Please input your current password!";
            document.getElementById("passMismatch").style.display = "block";
            allowSubmit = false;
        } else if (nP == null || nP == "") {
            document.getElementById("passMismatch").innerHTML = "Please input a new password!";
            document.getElementById("passMismatch").style.display = "block";
            allowSubmit = false;
        } else if (cP == null || cP == "") {
            document.getElementById("passMismatch").innerHTML = "Please confirm new password!";
            document.getElementById("passMismatch").style.display = "block";
            allowSubmit = false;
        } else if (cP != nP) {
            document.getElementById("passMismatch").innerHTML = "New password mismatch! Try again.";
            document.getElementById("passMismatch").style.display = "block";
            allowSubmit = false;
        }
        else {
            document.getElementById("passMismatch").style.display = "none";
            allowSubmit = true;
        }

        return allowSubmit;
    }
</script>

JavaScript表单验证问题

2 个答案: