Question

我目前正在使用html来编写“表单条目”。我还使用JavaScript验证来验证表单中的输入。到目前为止，我有'姓名'，'主题'和'考试号码'。但是我的验证对我的考试号码不起作用。它几乎完成，但是当我测试我的考试编号验证时，我遇到了一个错误。在测试时，我输入了'abcd'到考试号码，这应该告知考试号码只应该是数字。显示错误消息（这是正确的），但在单击“确定”以尝试其他输入后，表单似乎已提交。如果有人可以帮我验证考试编号，那么输入只能是四位数，并且在出现错误信息之后，不会提交表格并允许用户重新输入他们的考试编号。

这是我的代码：

<head>

<title>Exam Entry</title>

<script language="javascript" type="text/javascript">

function validateForm(e) {

    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;
    }

    var regex = /^\d{4}$/;
    if (document.ExamEntry.Examination_number.value == "") {
        msg+="You must enter your examination number";
    } else if (isNaN(document.ExamEntry.Examination_number.value)) {
        msg+="Examination number should only contain digits";
    } else if (!regex.test(document.ExamEntry.Examination_number.value)) {
        msg+="Examination number should contain exactly 4 digits";
    }

    if (msg != "") {
        alert(msg);
    }

    return result;
}
</script>



</head>

<body>
<h1>Exam Entry Form</h1>
<form name="ExamEntry" method="post" action="success.html" onsubmit="return validateForm();">
    <table width="60%" 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>
            <td id="Examination_number">Examination number</td>
            <td><input type="text" maxlength="4" name="Examination_number" /></td>
        </tr>
        <tr>
            <td><input type="submit" name="Submit" value="Submit" /></td>
            <td><input type="reset" name="Reset" value="Reset" /></td>
        </tr>
    </table>
</form>
</body>

</html>

Answer 1

验证完成后，如果错误，则必须返回false，

var regex = /^\d{4}$/;
if (document.ExamEntry.Examination_number.value == "") {
    msg+="You must enter your examination number";
    result = false;
} else if (isNaN(document.ExamEntry.Examination_number.value)) {
    msg+="Examination number should only contain digits";
    result = false;
} else if (!regex.test(document.ExamEntry.Examination_number.value)) {
    msg+="Examination number should contain exactly 4 digits";
    result = false;
}

Answer 2

显示消息时需要result = false。这样做：

if (msg != "") {
     result = false;
     alert(msg);
}

对表单的考试号码进行JavaScript验证

2 个答案: