0

我最近刚刚开始学习 Javascript，作为我的第一个项目之一，我正在创建一个表单，该表单可以在用户输入时进行实时验证。对于每个文本字段，都有一个类似“userError()”的函数来检查错误。每次更改文本字段时都会运行此函数。

它工作正常，除了一个问题。我有两个包含一个按钮的 div。一个是禁用的提交按钮（当表单中仍然存在错误时），另一个是真正的提交按钮（当所有字段都有效时）。函数“disableSubmit()”在加载时运行，所以真正的提交按钮是隐藏的，直到表单完成。每次成功验证一个字段时，都会运行函数 switchButton()。switchButton 检查所有函数（userError、passError 等）是否返回 true。如果他们这样做了，真正的提交按钮就会显示出来，而禁用的按钮就会隐藏起来。我认为这会起作用，但由于某种原因它不起作用。即使表单没有错误，它也只会始终显示禁用的按钮。

Javascript：

<script>
button=document.getElementById('submit')
password=document.getElementById('password')
function switchButton() {
    if (userError() && passError() && confirmError() && emailError()) {
        document.getElementById('submitbutton').style.display = 'inline';
        document.getElementById('disabled').style.display = 'none'; 
    }
    else {
        document.getElementById('submitbutton').style.display = 'none';
        document.getElementById('disabled').style.display = 'inline';
    }
}
function disableSubmit() {
    document.getElementById('submitbutton').style.display = 'none';
    document.getElementById('disabled').style.display = 'inline';   
}
function userError() {

    username=document.getElementById('username')
    usererror=document.getElementById('usererror')


    if (username.value.length < 4) {
        usererror.innerHTML='<font size="2" color="red"><img src="cross.png" style="max-width: 10px"/>&nbsp;&nbsp;Username too short.</font>';
        return false;
    } else if (username.value.length > 12) {
        usererror.innerHTML='<font size="2" color="red"><img src="cross.png" style="max-width: 10px"/>&nbsp;&nbsp;Username too long.</font>';
        return false;
    } else {
        usererror.innerHTML='<font size="2" color="darkgreen"><img src="check.jpg" style="max-width: 10px"/>&nbsp;&nbsp;Username looks great!</font>';
        return true;
        switchButton();
    }
}

function passError() {

    password=document.getElementById('password')
    passerror=document.getElementById('passerror')


    if (password.value.length < 7) {
        passerror.innerHTML='<font size="2" color="red"><img src="cross.png" style="max-width: 10px"/>&nbsp;&nbsp;Password too short.</font>';
        return false;
    } else if (password.value.length > 32) {
        passerror.innerHTML='<font size="2" color="red"><img src="cross.png" style="max-width: 10px"/>&nbsp;&nbsp;Password too long.</font>';
        return false;
    } else if (password.value.length = 0) {
        passerror.innerHTML='<font size="2" color="red"><img src="cross.png" style="max-width: 10px"/>&nbsp;&nbsp;Password not entered.</font>';
        return false;
    } else {
        passerror.innerHTML='<font size="2" color="darkgreen"><img src="check.jpg" style="max-width: 10px"/>&nbsp;&nbsp;Password looks great!</font>';
        return true;
        switchButton();
    }
}


function confirmError() {

    confirm=document.getElementById('confirm')
    confirmerror=document.getElementById('confirmerror')


    if (confirm.value != password.value) {
        confirmerror.innerHTML='<font size="2" color="red"><img src="cross.png" style="max-width: 10px"/>&nbsp;&nbsp;Passwords do not match.</font>';
        return false;
    } else {
        confirmerror.innerHTML='<font size="2" color="darkgreen"><img src="check.jpg" style="max-width: 10px"/>&nbsp;&nbsp;The passwords match!</font>';
        return true;
        switchButton();
    }
}


function emailError() {

    email=document.getElementById('email')
    emailerror=document.getElementById('emailerror')
    var atpos=email.value.indexOf("@");
    var dotpos=email.value.lastIndexOf(".");

    if (email.value.length > 40) {
        emailerror.innerHTML='<font size="2" color="red"><img src="cross.png" style="max-width: 10px"/>&nbsp;&nbsp;Email too long.</font>';
        return false;
   } else if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.value.length) {
        emailerror.innerHTML='<font size="2" color="red"><img src="cross.png" style="max-width: 10px"/>&nbsp;&nbsp;Email not valid.</font>';
        return false;
   } else if (email.value.length < 1) {
        emailerror.innerHTML='<font size="2" color="red"><img src="cross.png" style="max-width: 10px"/>&nbsp;&nbsp;Email not entered.</font>';
        return false;
   } else {
        emailerror.innerHTML='<font size="2" color="darkgreen"><img src="check.jpg" style="max-width: 10px"/>&nbsp;&nbsp;Email looks great!</font>';
        return true;
        switchButton();
    }
    }

    </script>

HTML 表单：

<form action="index.php" method="post">


                <input type="text" maxlength="12" id="username" onkeyup="userError()" onchange="userError()" class="loginfield" name="registerusername" placeholder="Username" style="height: 20px;" size="50" />
                &nbsp;&nbsp;<a style="font-weight: normal;" id="usererror"></a><br><br>

                <input type="password" id="password" class="loginfield" name="registerpass" onkeyup="passError()" onchange="passError()" placeholder="Password" style="height: 20px;" size="50" />
                &nbsp;&nbsp;<a style="font-weight: normal;" id="passerror"></a><br><br>

                <input id="confirm" type="password" class="loginfield" name="registerconfirm" onkeyup="confirmError()" onchange="confirmError()" placeholder="Confirm Password" style="height: 20px;" size="50" />
                &nbsp;&nbsp;<a style="font-weight: normal;" id="confirmerror"></a><br><br>

                <input id="email" type="text" class="loginfield" name="registeremail" onkeyup="emailError()" onchange="emailError()" placeholder="E-mail Address" style="height: 20px;" size="50" />
                &nbsp;&nbsp;<a style="font-weight: normal;" id="emailerror"></a><br>

                <div id="disabled">
                <p><input id="disabled" type="button" name="registersubmit" value="Sign up for CP Cheats"/ DISABLED> &nbsp;&nbsp;<a style="font-weight: normal;" id="buttonerror"><font size="2" color="grey">Complete the form first!</font></a>
                </div>

            <div id="submitbutton">
                <p><input id="submit" type="submit" class="loginbutton" name="registersubmit" value="Sign Up for CP Cheats"/> 
                </div>

            </form></p>
4

1 回答 1

1

你有你的return true;之前switchButton()，所以这个函数永远不会被调用。. . 但如果是这样，我认为你会遇到大麻烦，可能会导致浏览器无响应。你是 switchButton 函数读取：

function switchButton() {
    if (userError() && passError() && confirmError() && emailError()) {
        document.getElementById('submitbutton').style.display = 'inline';
        document.getElementById('disabled').style.display = 'none'; 
    }
    else {
        document.getElementById('submitbutton').style.display = 'none';
        document.getElementById('disabled').style.display = 'inline';
    }
}

据我所知，从您必须检查每个字段的四个函数中调用该函数，但是在 if 中，您将调用相同的检查函数，从而导致调用的无限循环switchButton()。

您需要switchButton()从每个fieldError()函数中删除调用。

如果此时它仍然不起作用，请确保您的 id 是正确的。

于 2013-06-25T23:02:40.247 回答