实时表单验证-如何检查所有字段是否有效
Live form validation - How do I check if all the fields are valid?
我最近刚刚开始学习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"/> 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>
在switchButton()之前有return true;，因此函数永远不会被调用。但如果真的发生了，我认为你会遇到大麻烦，很可能会导致浏览器失去响应。您正在切换按钮功能读取：
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()的无休止循环。
您需要从每个fieldError()函数中删除switchButton()调用。
如果此时仍然不起作用，请确保您的id正确无误。
相关文章：
- Magento表单验证，表单提交时没有有效字段
- 按键时标记为ng的必填字段有效，即使是's是空的
- cakepp中的javascript验证表示字段不是't是必需的't有效
- Angular JS字段仅当其值大于tan零时有效
- 禁用字段在IE中有效，但在Firefox中无效
- 是否可以在字段有效时触发事件(html5）
- 如何使必填字段在有效时不可见
- 在 AngularJS 中，如何在输入字段中输入有效数据时在输入字段前面显示绿色刻度线
- jQuery 验证插件如何指示所有字段都有效
- 一旦用户在输入字段中输入有效的美国邮政编码值，如何自动填充城市和州输入字段
- 实时表单验证-如何检查所有字段是否有效
- 如何有效地添加?在我用JavaScript创建的表单中添加许多字段
- 提交按钮仅在前两个字段为空时有效
- 最有效的jquery字段验证方法
- 如何在Angular消息中显示字段名及其有效值
- 将非用户字段添加到有效负载中以用于JWT令牌
- 在2dsphere索引字段上查询没有返回有效结果
- 如何使用onClick ONLY，如果电子邮件输入字段是有效的
- 只允许英文字符和nr在html输入字段.这对于复制/粘贴是有效的
- JavaScript/jQuery Regex用有效字符替换输入字段
