我刚刚开始学习Javascript，作为我的第一个项目之一，我正在创建一个作为用户类型进行现场验证的表单。对于每个文本字段，都有一个像“userError（）”这样的函数来检查错误。每次更改文本字段时都会运行此函数。
除一个问题外，它工作正常。我有两个div包含一个按钮。一个是禁用的提交按钮（当表单中仍有错误时），另一个是真实的提交按钮（当所有字段都有效时）。函数“disableSubmit（）”运行onload，因此隐藏真实的提交按钮，直到表单完成。每次成功验证一个字段时，都会运行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"/> 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"/> Username too long.</font>';
return false;
} else {
usererror.innerHTML='<font size="2" color="darkgreen"><img src="check.jpg" style="max-width: 10px"/> 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"/> 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"/> 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"/> Password not entered.</font>';
return false;
} else {
passerror.innerHTML='<font size="2" color="darkgreen"><img src="check.jpg" style="max-width: 10px"/> 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"/> Passwords do not match.</font>';
return false;
} else {
confirmerror.innerHTML='<font size="2" color="darkgreen"><img src="check.jpg" style="max-width: 10px"/> 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"/> 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"/> 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"/> Email not entered.</font>';
return false;
} else {
emailerror.innerHTML='<font size="2" color="darkgreen"><img src="check.jpg" style="max-width: 10px"/> 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" />
<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" />
<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" />
<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" />
<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> <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>
答案 0 :(得分：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正确无误。