Question

我试图制作一个寄存器公式，只有在检查所有输入是否正确后才能发布。所以我在这里找到了一个很好的德语教程：

http://de.selfhtml.org/javascript/beispiele/formulareingaben.htm

..并试图从中获取我需要的东西：

<script type="text/javascript">
function checkForm(){
        if(document.getElementById("email").value =="" || eMailToCheck.indexOf("@") == -1){
            alert("Bitte Emailadresse eingeben");
            document.getElementById("email").focus();
            return false;
        }

        if(document.getElementById("username").value ==""){
            alert("Bitte Usernamen eingeben");
            document.getElementById("username").focus();
            return false;
        }

        if((document.getElementById("passwordOne").value != document.getElementById("passwordTwo").value)){
            alert("Passwörter stimmen nicht überein");
            document.getElementById("passwordOne").focus();
            return false;
        }

        if((document.getElementById("passwordOne").value == "") || (document.getElementById("passwordTwo").value == "")){
            alert("Bitte beide Passwortfelder ausfüllen");
            document.getElementById("passwordOne").focus();
            return false;
        }

        if((document.getElementById("passwordOne").value.length < 8) || (document.getElementById("passwordTwo").value.length < 8)){
            alert("Passwort muss mind. 8 Zeichen beinhalten");
            document.getElementById("passwordOne").focus();
            return false;
        }

    }
</script>

在html的头部并通过

调用它

<form action="profile.html" onsubmit="return checkForm()" method="post" name="Formular">

效果令人印象深刻：

调用该函数并输入第一个if（） - 块。但是，只有我在下一行中有另一个if（）或没有。如果我在该行中有一个无条件的命令，它就不再起作用了。

只有电子邮件验证有效，所有其他验证都没有输入。我不明白，为什么！有人可以告诉我吗？

编辑：这是我的完整代码：

<html>
<head>
    <title>BlackJackX</title>
    <script type="text/javascript">
    function checkForm(){
        var flag = true; 
            if(document.getElementById("email").value =="" || eMailToCheck.indexOf("@") == -1){
                alert("Bitte Emailadresse eingeben");
                document.getElementById("email").focus();
                flag=false;
            }
            else if(document.getElementById("username").value ==""){
                alert("Bitte Usernamen eingeben");
                document.getElementById("username").focus();
                flag=false;
            }
            else if((document.getElementById("passwordOne").value != document.getElementById("passwordTwo").value)){
                alert("Passwörter stimmen nicht überein");
                document.getElementById("passwordOne").focus();
                flag=false;
            }
            else if((document.getElementById("passwordOne").value == "") || (document.getElementById("passwordTwo").value == "")){
                alert("Bitte beide Passwortfelder ausfüllen");
                document.getElementById("passwordOne").focus();
                flag=false;
            }
            else if((document.getElementById("passwordOne").value.length < 8) || (document.getElementById("passwordTwo").value.length < 8)){
                alert("Passwort muss mind. 8 Zeichen beinhalten");
                document.getElementById("passwordOne").focus();
                flag=false;
            }

            return flag;
        }
    </script>
</head>
<body>
    <div style="width:300px; height:175px; background-color:#DDDDDD; margin-left:auto; margin-right:auto; margin-top:150px; align:center;">
        <p>
        <p>
        <form action="profile.html" onsubmit="return checkForm()" method="post">
            <table align="center">
                <br>
                <tr>
                    <td style="text-align:right; width:25px; color:red">
                        <p id="emailValid" name="emailValid"></p>
                    </td>
                    <td>
                        Emailadresse:
                    </td>
                    <td>
                        <input name="email" id="email" type="text" size="15" maxlength="25" onblur="validateEmail()">
                    </td>
                </tr>
                <tr>
                    <td style="text-align:right; color: red">
                        <p id="usernameValid" name="usernameValid"></p>
                    </td>
                    <td>
                        Username:
                    </td>
                    <td>
                        <input name="username" id="username" type="text" size="15" maxlength="25" onblur="validateUsername()">
                    </td>
                </tr>
                <tr>
                    <td style="text-align:right; color:red" id="passwordOneValid" name="password1Valid">
                    </td>
                    <td>
                        Passwort:    
                    </td>
                    <td>
                        <input style="25px" name="passwordOne" id="passwordOne" type="password" size="15" maxlength="16" style="height: 25px" onblur="validatePasswordOne()">
                    </td>
                </tr>
                <tr>
                    <td style="text-align:right; color:red" id="passwordTwoValid" name="passwordTwoValid">
                    </td>
                    <td>
                        ..wiederholen:
                    </td>
                    <td>
                        <input style="25px" name="passwordFieldTwo" id="passwordTwo" type="password" size="15" maxlength="16" style="height: 25px" onkeyup="validatePasswordTwo()">
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td>
                        <input name="submit" id="submit" type="submit" style="width: 92px" value="Registrierung">
                    </td>
                </tr>
            </table>                            
        </form>

        <script type="text/javascript">

        function validateEmail(){
            var eMailToCheck = document.getElementById("email").value;
            if(eMailToCheck!="" && eMailToCheck.indexOf("@") != -1){
                document.getElementById("emailValid").innerHTML = "";
            }
            else{
                document.getElementById("emailValid").innerHTML = "!";
            }
        }

        function validateUsername(){
            var usernameToCheck = document.getElementById("username").value;
            if(usernameToCheck != ""){
                document.getElementById("usernameValid").innerHTML = "";
            }
            else{
                document.getElementById("usernameValid").innerHTML = "!";
            }
        }

        function validatePasswordOne(){
            var pwToCheck = document.getElementById("passwordOne").value;
            if(pwToCheck != ""){
                document.getElementById("passwordOneValid").innerHTML = "";
            }
            else{
                document.getElementById("passwordOneValid").innerHTML = "!";
            }
            if(pwToCheck.length < 8 && pwToCheck != ""){
                document.getElementById("passwordOneValid").innerHTML = "8 >";
            }
        }

        function validatePasswordTwo(){
            var pwToCheck = document.getElementById("passwordTwo").value;
            if(pwToCheck != document.getElementById("passwordOne").value){
                document.getElementById("passwordTwoValid").innerHTML = "!=";
            }
            else if(pwToCheck == document.getElementById("passwordOne").value){
                document.getElementById("passwordTwoValid").innerHTML = "";
            }
        }
        </script>
    </div>  
</body>
</html>

Answer 1

你应该在函数结束时返回，否则它会过早退出（返回退出）。

function checkForm(){
      var result = true;
        if(document.getElementById("email").value =="" || eMailToCheck.indexOf("@") == -1){
            alert("Bitte Emailadresse eingeben");
            document.getElementById("email").focus();
            result=false;
        }

        if(document.getElementById("username").value ==""){
            alert("Bitte Usernamen eingeben");
            document.getElementById("username").focus();
            result=false;
        }

        if((document.getElementById("passwordOne").value != document.getElementById("passwordTwo").value)){
            alert("Passwörter stimmen nicht überein");
            document.getElementById("passwordOne").focus();
            result=false;
        }

        if((document.getElementById("passwordOne").value == "") || (document.getElementById("passwordTwo").value == "")){
            alert("Bitte beide Passwortfelder ausfüllen");
            document.getElementById("passwordOne").focus();
            result=false;
        }

        if((document.getElementById("passwordOne").value.length < 8) || (document.getElementById("passwordTwo").value.length < 8)){
            alert("Passwort muss mind. 8 Zeichen beinhalten");
            document.getElementById("passwordOne").focus();
            result=false;

        }
    return result;
    }

Answer 2

当然，它只会输入第一个if，因为每个if条件都有一个return语句。最后放一个return语句。将您的代码更改为： -

<script type="text/javascript">
function checkForm(){
   var flag=true;
        if(document.getElementById("email").value =="" || eMailToCheck.indexOf("@") == -1){
            alert("Bitte Emailadresse eingeben");
            document.getElementById("email").focus();
            flag= false;
        }

        if(document.getElementById("username").value ==""){
            alert("Bitte Usernamen eingeben");
            document.getElementById("username").focus();
            flag= false;
        }

        if((document.getElementById("passwordOne").value != document.getElementById("passwordTwo").value)){
            alert("Passwörter stimmen nicht überein");
            document.getElementById("passwordOne").focus();
           flag= false;
        }

        if((document.getElementById("passwordOne").value == "") || (document.getElementById("passwordTwo").value == "")){
            alert("Bitte beide Passwortfelder ausfüllen");
            document.getElementById("passwordOne").focus();
           flag= false;
        }

        if((document.getElementById("passwordOne").value.length < 8) || (document.getElementById("passwordTwo").value.length < 8)){
            alert("Passwort muss mind. 8 Zeichen beinhalten");
            document.getElementById("passwordOne").focus();
            flag= false;
        }

return flag;
    }
</script>

Answer 3

如果存在错误，则应检查错误，然后return false，否则请提交表单。看到这对你有用。

<script type="text/javascript">
    function checkForm(){
        var errorCounter=0;
        if(document.getElementById("email").value =="" || document.getElementById("email").value.indexOf("@") == -1){
            alert("Bitte Emailadresse eingeben");
            document.getElementById("email").focus();
            errorCounter++;
        }

        if(document.getElementById("username").value ==""){
            alert("Bitte Usernamen eingeben");
            document.getElementById("username").focus();
            errorCounter++;
        }

        if((document.getElementById("passwordOne").value != document.getElementById("passwordTwo").value)){
            alert("Passwörter stimmen nicht überein");
            document.getElementById("passwordOne").focus();
            errorCounter++;
        }

        if((document.getElementById("passwordOne").value == "") || (document.getElementById("passwordTwo").value == "")){
            alert("Bitte beide Passwortfelder ausfüllen");
            document.getElementById("passwordOne").focus();
            errorCounter++;
        }

        if((document.getElementById("passwordOne").value.length < 8) || (document.getElementById("passwordTwo").value.length < 8)){
            alert("Passwort muss mind. 8 Zeichen beinhalten");
            document.getElementById("passwordOne").focus();
            errorCounter++;
        }
        if(errorCounter>0)
            return false;
    }
</script>

修改：实际上问题是eMailToCheck.indexOf("@")，其中eMailToCheck未定义但正在使用，因此我只是将其更改为document.getElementById("email").value.indexOf("@")并解决了问题问题

Answer 4

更改此行：

if(document.getElementById("email").value =="" || eMailToCheck.indexOf("@") == -1){

为：

if(document.getElementById("email").value =="" || document.getElementById("email").value.indexOf("@") == -1){

checkForm（）只输入第一个if（）

4 个答案: