如何指出所有错误而不是逐个指定
以下是鹅卵石脚本。它在你留下空白的那一刻起作用,它通过提交按钮指出它。但它很烦人,因为它指出了一个接一个,而不是马上删除所有空白的字段。如何指出所有错误而不是逐个指定
我该如何解决这个问题?请把它分成小号,因为这里的大目标是理解它,而不仅仅是做这件事。
document.forms[0].onsubmit= function() {
var form = document.forms[0];
for (var i = 0; i < form.elements.length; i++) {
if (form.elements[i].value.length == 0) {
console.log(form.elements[i]);
form.elements[i].border = "1px solid red";
form.elements[i].style.backgroundColor = "#FFCCCC";
return false;
}
}
}
<form method="post" action="" id="myForm">
<div id="validation"></div>
<p><label>Name<br><input type="text" name="Name"></label></p>
<p><label>Email<br><input type="email" name="Email" ></label></p>
<p><input type="submit" value="Submit"></p>
</form>
你return
语句导致循环提前终止。如果你想要发信号给所有不完整的区域,就让它运行到最后。
document.forms[0].onsubmit= function(event) {
for (var i = 0; i < this.elements.length; i++) {
if (this.elements[i].value.length == 0) {
event.preventDefault();
this.elements[i].style.border = "1px solid red";
this.elements[i].style.backgroundColor = "#FFCCCC";
}
}
}
而这里的写它一个更现代的方式,使用类和更新的语法。
document.querySelector("form").addEventListener("submit", function(event) {
for (const el of this.elements) {
if (el.classList.toggle("incomplete", el.value.length == 0)) {
event.preventDefault();
}
}
});
.incomplete {
border: 1px solid red;
background-color: #FFCCCC;
}
<form method="post" action="" id="myForm">
<div id="validation"></div>
<p><label>Name<br><input type="text" name="Name"></label></p>
<p><label>Email<br><input type="email" name="Email" ></label></p>
<p><input type="submit" value="Submit"></p>
</form>
感谢您花时间教我现代化的方式。我没有意识到这一点。尝试了你的第一个脚本,它的工作。但是当我尝试你的现代剧本时,它并没有奏效。 – user273072545345
@ user273072545345:我忘了从CSS中删除引号。我在上面创建了一个演示,但似乎演示运行器不喜欢箭头函数,因此它恢复为传统的'函数'语法。 – spanky
这两个脚本现在都可以使用。谢谢。现代脚本让我感到有些害怕,因为它对我来说似乎很陌生,也就是说,当我使用JS验证的东西时,并不是我在网上看到的。这一行是什么意思'this.elements的常量? – user273072545345
您一旦退出循环为形式的输入元件具有0
长度:
if (form.elements[i].value.length == 0) {
.. ..
return false;
}
的return false;
必须位于在循环之后,如果至少一个输入没有符合你的要求。
您可以使用boolean
变量来存储此信息。
<script>
document.forms[0].onsubmit= function() {
var form = document.forms[0];
var hasError = false;
for (var i = 0; i < form.elements.length; i++) {
if (form.elements[i].value.length == 0) {
console.log(form.elements[i]);
form.elements[i].border = "1px solid red";
form.elements[i].style.backgroundColor = "#FFCCCC";
hasError = true;
}
}
if (hasError){
return false;
}
}
</script>
你能否补充你的后半部分?我还在学习JS,不确定如何使用布尔因子来使脚本正常工作 – user273072545345
当然。我用完整的代码编辑。 – davidxxx
你会介意解释'hasError = true;'是如何工作的吗?后来我不明白真正的需要,而不是'返回假'......对不起,JS中的新手。 – user273072545345
从for内部删除'return false;',它会在第一次迭代后停止循环。 – Raphael