HTML Web表单-为什么我的JavaScript验证错误？_Javascript_Jquery_Html

HTML Web表单-为什么我的JavaScript验证错误？

javascript jquery html

HTML Web表单-为什么我的JavaScript验证错误？,javascript,jquery,html,Javascript,Jquery,Html,我正在努力学习html和JavaScript，并制作了一个Web表单。在我尝试添加一个if语句来验证只接受4个字符的输入并将true返回到webform之前，一切都很顺利。删除if允许代码再次工作…我的if有什么问题？我错过了什么任何帮助都将受到感激 <head> <title>Exam entry</title> <script language="javascript" type="text/javascript"> function v

我正在努力学习html和JavaScript，并制作了一个Web表单。在我尝试添加一个if语句来验证只接受4个字符的输入并将true返回到webform之前，一切都很顺利。删除if允许代码再次工作…我的if有什么问题？我错过了什么

任何帮助都将受到感激

<head>
<title>Exam entry</title>

<script language="javascript" type="text/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.examno.value=="")
        {
        msg+="You must enter your exam number \n";
        document.ExamEntry.examno.focus();
        document.getElementById('examno').style.color="red";
        result = false;
        }
    if (document.ExamEnrty.getElementById("examno").value.length != 4)
        {
        msg+="The exam number must equal 4 \n";
        document.Examentry.examno.focus();
        document.getElementById('examno').style.color="red";
        result = false;
        }
    if(msg=="")
        {
        return result;
        }
    {
    alert(msg)
    return result;
    }
}

</script>



</head>
<body>
<h1>Exam Entry Form</h1>

<form name="ExamEntry" method="post" action="success.html">

<table width="50%" border="0">

<tr>
<td id="name">Name</td>
<td><input type="text" name="name" /></td>
</tr>

<tr>
<td id="subject">Subject</td>
<td><input type="text" name="subject" /></td>
</tr>

<tr>
<td id="examno">examno</td>
<td><input type="number" name="examno" /></td>
</tr>


<tr>
<td><input type="submit" name="Submit" value="Submit" onclick="return validateForm();" /></td>
<td><input type="reset" name="Reset" value="Reset" /></td>
</tr>

</table>

</form>
</body>

已改为

if (document.ExamEntry.examno.value.length != 4)

但是，当我添加长度小于或大于4的字符时，运行时的代码现在将返回true到webform，此时它将返回false并抛出一个错误

代码现在是：

<head>
<title>Exam entry</title>

<script language="javascript" type="text/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.examno.value=="")
        {
        msg+="You must enter your exam number \n";
        document.ExamEntry.examno.focus();
        document.getElementById('examno').style.color="red";
        result = false;
        }
    if (document.ExamEntry.examno.value.length != 4)
            {
            msg+="The exam number must equal 4 \n";
            document.Examentry.examno.focus();
            document.getElementById('examno').style.color="red";
            result = false;
        }
    if(msg=="")
        {
        return result;
        }
    {
    alert(msg)
    return result;
    }
}

</script>



</head>
<body>
<h1>Exam Entry Form</h1>

<form name="ExamEntry" method="post" action="success.html">

<table width="50%" border="0">

<tr>
<td id="name">Name</td>
<td><input type="text" name="name" /></td>
</tr>

<tr>
<td id="subject">Subject</td>
<td><input type="text" name="subject" /></td>
</tr>

<tr>
<td id="examno">examno</td>
<td><input type="number" name="examno" /></td>
</tr>


<tr>
<td><input type="submit" name="Submit" value="Submit" onclick="return validateForm();" /></td>
<td><input type="reset" name="Reset" value="Reset" /></td>
</tr>

</table>

</form>
</body>

我真的很愚蠢吗？！！帮助

您引用的是ID，而不是试图验证的文本字段的名称

if (document.ExamEnrty.getElementById("examno").value.length != 4)

应该是这样的

if (document.ExamEntry.examno.value.length != 4)

抱歉，我没有测试其余的语法，但是id examno被分配给您的td而不是您的文本字段。您的if语句有三个问题，其中两个是拼写错误。首先，您在行中拼错了ExamEnty：

if (document.ExamEnrty.getElementById("examno").value.length != 4)

document.Examentry.examno.focus();

这应该是：

if (document.ExamEntry.getElementById("examno").value.length != 4)

document.ExamEntry.examno.focus();

但这甚至不是答案，因为这将引用ID为examno的元素，examno是所需输入的表单元格父元素。相反，将该行替换为：

if (document.ExamEntry.examno.value.length != 4) {

接下来，在该行的if块中有一个输入错误：

if (document.ExamEnrty.getElementById("examno").value.length != 4)

document.Examentry.examno.focus();

这应该是：

if (document.ExamEntry.getElementById("examno").value.length != 4)

document.ExamEntry.examno.focus();

已修复

请尝试以下操作：

此外，如果在第一次尝试后通过了测试，您应该将红色文本设置回黑色，我将其添加到小提琴中。

这是您代码的精确副本吗？在倒数第二个if中，元素名称拼写错误。Examertypo。document.examenty.getElementByIdexamno.value.length。应该是测试版。请阅读错误控制台。非常感谢！巨大的帮助！谢谢你抽出时间@samwickins32-别担心，我不知道为什么有人决定否决这个答案，但我很高兴你解决了这个问题。我在没有意识到第一个答案已经发布的情况下点击了提交，为什么不把它放在一边，因为这是一个骗局…哈哈。。。