无警报的Javascript验证表单（）

我正在尝试构建一个HTML表单，它将验证用户是否在每个输入框中输入了所有值。到目前为止，我在谷歌的例子中发现，当用户将输入框留空时，它会调用alert（），这对于用户来说很烦人，如果他们必须填充大约10个框，然后意外地点击submit，现在他们必须关闭10个警报。我在想是否可以在空框旁边显示一条红色消息，指示哪些框是空的。 以下是我显示警报的代码：

<form name="ExamEntry" method="POST">
    <input type="text" id="name" name="name" />
    <input type="text" id="subject" name="subject" />
    <input type="text" id="examnumber" name="examNumber" />
    <input type="submit" name="submit" value="Submit" onlick="return validateForm()" />
</form>

javascript:

function validateForm(){
    var result = true;
    var msg = "";

    if(document.ExamEntry.name.value==""){
        msg+="You must enter your Name \n";
        document.ExamEntry.name.focus();
        document.getElementById('name').style.color="red";
        result = false;
    }

    if(document.ExamEntry.subject.value==""){
        msg+="You must enter the Subject \n";
        document.ExamEntry.subject.focus();
        document.getElementById('subject').style.color="red";
        result = false;
    }

    if(document.ExamEntry.examNumber.value=="")
    {
        msg+="You must enter the Examination Number \n";
        document.ExamEntry.examNumber.focus;
        document.getElementById('examnumber').style.color="red";
        result = false;
    }

    if(document.ExamEntry.examNumber.value.length!=4)
    {
        msg+="Your Examination Number must be 4 characters long \n";
        document.ExamEntry.examNumber.focus;
        document.getElementById('examnumber').style.color="red";
        result = false;
    }

    var lvlmsg="";
    for(var i=0; i < document.ExamEntry.level.length; i++)
        {
            if(document.ExamEntry.level[i].checked)
            {
                lvlmsg = document.ExamEntry.level[i].value;
                break;
            }
        }
    if(lvlmsg=="")
        {
            msg+="You Must Indicate Your Level";
            result=false;
            document.getElementById('radioButtons').style.color="red";
        }
    else
        {
            alert(lvlmsg);
        }

    if(msg==""){
        return result;
    }
    else{
        alert(msg);
        return result;
    }
}

函数validateForm（）{
var结果=真；
var msg=“”；
if（document.ExamEntry.name.value==“”）{
msg+=“您必须输入您的姓名\n”；
document.ExamEntry.name.focus（）；
document.getElementById（'name'）.style.color=“红色”；
结果=假；
}
if（document.ExamEntry.subject.value==“”）{
msg+=“您必须输入主题\n”；
document.ExamEntry.subject.focus（）；
document.getElementById（'subject'）.style.color=“red”；
结果=假；
}
if（document.ExamEntry.examNumber.value==“”）
{
msg+=“您必须输入考试编号\n”；
document.ExamEntry.examNumber.focus；
document.getElementById（'examnumber'）.style.color=“红色”；
结果=假；
}
if（document.ExamEntry.examNumber.value.length！=4）
{
msg+=“您的考试编号必须为4个字符\n”；
document.ExamEntry.examNumber.focus；
document.getElementById（'examnumber'）.style.color=“红色”；
结果=假；
}
var lvlmsg=“”；
for（var i=0；i

---

有什么想法吗？

在每次输入后创建一个span元素：

<form name="ExamEntry" method="POST">
    <input type="text" id="name" name="name" /><span id="name-msg"></span>
    <input type="text" id="subject" name="subject" /> <span id="subject-msg"></span>
    <input type="text" id="examnumber" name="examNumber" /> <span id="examnumber-msg"></span>
    <input type="submit" name="submit" value="Submit" onlick="return validateForm()" />
</form>

document.getElementById("[id]").style.display = "inline";

做：

---

别忘了删除提醒

在每次输入后创建一个跨度元素：

<form name="ExamEntry" method="POST">
    <input type="text" id="name" name="name" /><span id="name-msg"></span>
    <input type="text" id="subject" name="subject" /> <span id="subject-msg"></span>
    <input type="text" id="examnumber" name="examNumber" /> <span id="examnumber-msg"></span>
    <input type="submit" name="submit" value="Submit" onlick="return validateForm()" />
</form>

document.getElementById("[id]").style.display = "inline";

做：

---

别忘了删除提醒

在每次输入后创建一个跨度元素：

<form name="ExamEntry" method="POST">
    <input type="text" id="name" name="name" /><span id="name-msg"></span>
    <input type="text" id="subject" name="subject" /> <span id="subject-msg"></span>
    <input type="text" id="examnumber" name="examNumber" /> <span id="examnumber-msg"></span>
    <input type="submit" name="submit" value="Submit" onlick="return validateForm()" />
</form>

document.getElementById("[id]").style.display = "inline";

做：

---

别忘了删除提醒

在每次输入后创建一个跨度元素：

<form name="ExamEntry" method="POST">
    <input type="text" id="name" name="name" /><span id="name-msg"></span>
    <input type="text" id="subject" name="subject" /> <span id="subject-msg"></span>
    <input type="text" id="examnumber" name="examNumber" /> <span id="examnumber-msg"></span>
    <input type="submit" name="submit" value="Submit" onlick="return validateForm()" />
</form>

document.getElementById("[id]").style.display = "inline";

做：

---

别忘了删除提醒

确保在实际代码中使用的是onclick而不是onclick；）

当我构建表单验证时，我会在每个元素旁边创建一个隐藏的内联跨距

<form name="ExamEntry" method="POST">
<input type="text" id="name" name="name" /><span>Please use a valid name.</span>
<input type="text" id="subject" name="subject" /><span>Please use a valid subject.</span>
<input type="text" id="examnumber" name="examNumber" /><span>Please use a valid exam number.</span>
<input type="submit" name="submit" value="Submit" onlick="return validateForm()" />
</form>

在js中，删除警报，并为每个输入添加如下内容：

<form name="ExamEntry" method="POST">
    <input type="text" id="name" name="name" /><span id="name-msg"></span>
    <input type="text" id="subject" name="subject" /> <span id="subject-msg"></span>
    <input type="text" id="examnumber" name="examNumber" /> <span id="examnumber-msg"></span>
    <input type="submit" name="submit" value="Submit" onlick="return validateForm()" />
</form>

document.getElementById("[id]").style.display = "inline";

---

确保在实际代码中使用的是onclick而不是onlick；）

当我构建表单验证时，我会在每个元素旁边创建一个隐藏的内联跨距

<form name="ExamEntry" method="POST">
<input type="text" id="name" name="name" /><span>Please use a valid name.</span>
<input type="text" id="subject" name="subject" /><span>Please use a valid subject.</span>
<input type="text" id="examnumber" name="examNumber" /><span>Please use a valid exam number.</span>
<input type="submit" name="submit" value="Submit" onlick="return validateForm()" />
</form>

在js中，删除警报，并为每个输入添加如下内容：

<form name="ExamEntry" method="POST">
    <input type="text" id="name" name="name" /><span id="name-msg"></span>
    <input type="text" id="subject" name="subject" /> <span id="subject-msg"></span>
    <input type="text" id="examnumber" name="examNumber" /> <span id="examnumber-msg"></span>
    <input type="submit" name="submit" value="Submit" onlick="return validateForm()" />
</form>

document.getElementById("[id]").style.display = "inline";

---

确保在实际代码中使用的是onclick而不是onlick；）

当我构建表单验证时，我会在每个元素旁边创建一个隐藏的内联跨距

<form name="ExamEntry" method="POST">
<input type="text" id="name" name="name" /><span>Please use a valid name.</span>
<input type="text" id="subject" name="subject" /><span>Please use a valid subject.</span>
<input type="text" id="examnumber" name="examNumber" /><span>Please use a valid exam number.</span>
<input type="submit" name="submit" value="Submit" onlick="return validateForm()" />
</form>

在js中，删除警报，并为每个输入添加如下内容：

<form name="ExamEntry" method="POST">
    <input type="text" id="name" name="name" /><span id="name-msg"></span>
    <input type="text" id="subject" name="subject" /> <span id="subject-msg"></span>
    <input type="text" id="examnumber" name="examNumber" /> <span id="examnumber-msg"></span>
    <input type="submit" name="submit" value="Submit" onlick="return validateForm()" />
</form>

document.getElementById("[id]").style.display = "inline";

---

确保在实际代码中使用的是onclick而不是onlick；）

当我构建表单验证时，我会在每个元素旁边创建一个隐藏的内联跨距

<form name="ExamEntry" method="POST">
<input type="text" id="name" name="name" /><span>Please use a valid name.</span>
<input type="text" id="subject" name="subject" /><span>Please use a valid subject.</span>
<input type="text" id="examnumber" name="examNumber" /><span>Please use a valid exam number.</span>
<input type="submit" name="submit" value="Submit" onlick="return validateForm()" />
</form>

在js中，删除警报，并为每个输入添加如下内容：

<form name="ExamEntry" method="POST">
    <input type="text" id="name" name="name" /><span id="name-msg"></span>
    <input type="text" id="subject" name="subject" /> <span id="subject-msg"></span>
    <input type="text" id="examnumber" name="examNumber" /> <span id="examnumber-msg"></span>
    <input type="submit" name="submit" value="Submit" onlick="return validateForm()" />
</form>

document.getElementById("[id]").style.display = "inline";

---

在每个警报前放置//我建议您首先创建错误元素，放置它们并根据需要设置它们的样式，然后向它们添加

display:none

。当您发现错误时，只需将显示切换到

block

，而不是显示警报。我建议您学会更符合您的风格。实际上，这甚至不是一个样式选择，为了将来的参考，开括号与语句放在同一行。请注意，您可以简单地说

（id=“name”是不必要的），并且可以设置自定义消息，如中所示。在每个警报（）前面放置一个//我建议您首先创建错误元素，根据需要放置它们并设置它们的样式，然后向它们添加

display:none

。当您发现错误时，只需将显示切换到

block

，而不是显示警报。我建议您学会更符合您的风格。实际上，这甚至不是一个样式选择，为了将来的参考，开括号与语句放在同一行。请注意，您可以简单地说

（id=“name”是不必要的），并且可以设置自定义消息，如中所示。在每个警报（）前面放置一个//我建议您首先创建错误元素，根据需要放置它们并设置它们的样式，然后向它们添加

display:none

。当您发现错误时，只需将显示切换到

block

，而不是显示警报。我建议您学会更符合您的风格。实际上，这甚至不是一个样式选择，为了将来的参考，开括号与语句放在同一行。请注意，您可以简单地说

（id=“name”是不必要的），并且可以设置自定义消息，如中所示。在每个警报（）前面放置一个//我建议您首先创建错误元素，根据需要放置它们并设置它们的样式，然后向它们添加

display:none

。当您发现错误时，只需将显示切换到

block

，而不是显示警报。我建议您学会更符合您的风格。实际上，它甚至不是一个样式选择，为了将来的参考，开括号与语句位于同一行。请注意，您可以简单地说

（id=“name”是不必要的）和yo