我想验证一个表单，使所有未填写的字段都显示在警报中，如下所示：
https://i.stack.imgur.com/unH29.png
我只能让它们以以下方式出现——我填充第一个，其他的都没有，然后只有第二个输入出现在警报中，而不是全部，就像如果我填充第一和第二个，只有第三个输入会出现在警报，而不是所有的
https://i.stack.imgur.com/IUlOD.png
这是我的javascript代码
function validar() {
var nome = document.getElementById("nome");
var cpf = document.getElementById("cpf");
var data = document.getElementById("data");
var sexo = document.getElementById("sexo");
var email = document.getElementById("email");
var celular = document.getElementById("celular");
var nivel = document.getElementById("nivel");
var media = document.getElementById("media").checked;
if (nome.value == "") {
alert("Nome não informado");
nome.focus();
return;
}
if (cpf.value == "") {
alert("CPF não informado");
cpf.focus();
return;
}
if (data.value == "") {
alert("Nascimento não informado");
data.focus();
return;
}
if (sexo.value == "") {
alert("Sexo não informada");
sexo.focus();
return;
}
if (email.value == "") {
alert("Email não informado");
email.focus();
return;
}
if (celular.value == "") {
alert("Celular não informado");
celular.focus();
return;
}
if (nivel.value == "") {
alert("Nivel não informado");
nivel.focus();
return;
}
if (media.value == "") {
alert("Media não informado");
media.focus();
return;
}
}
如果您有不同类型的输入，我认为您可以使用如下简单的解决方案：
function myFunction() {
const t1 = document.getElementById("t1");
const t2 = document.getElementById("t2");
const t3 = document.getElementById("t3");
let msg="";
if(!t1.value) { // or checked
msg += "t1 is null n";
}
if(!t2.value){
msg += "t2 is null n";
}
if(!t3.value){
msg += "t3 is null n";
}
alert(msg);
}<html>
<body>
<input type="text" id="t1" />
<br>
<input type="text" id="t2" />
<br>
<input type="text" id="t3" />
<button onclick="myFunction()">Try it</button>
</body>
</html>首先，让我们稍微清理一下代码。由于每次验证都使用相同的格式，因此重用以创建十个if语句是没有意义的。
此外，我们可以过滤所有缺少值的元素(又名Falsey(，并根据其内部文本对其进行映射(显然，如果内部文本与名称不相等，则应进行其他修改(
const elements = [nome, cpf, data, sexo, email, celular, nivel, media]
const filtered = elements.filter(element => !element.value)
if (filtered.length > 0) {
filtered.forEach(element => element.focus())
return alert(filtered.map(element => element.innerText).join('n'))
}