Question

我目前正在使用html来编写表格条目＆＃39;。我还使用JavaScript验证来验证表单中的输入。到目前为止，我有＆＃39; name＆＃39;，＆＃39; subject＆＃39;和考试编号＆＃39;。但是我的验证对我的考试号码不起作用。对于考试号码，我希望验证确保输入只有4位数，因此我添加了＆＃39; maxlength =＆＃34; 4＆＃34;＆＃39;。如果有人可以帮助我进行此验证，首先验证考试编号并确保输入为四位数，这将非常有用，谢谢

这是我的代码：

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

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

    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

它不是.value ==“4”它是.value.length == 4

Answer 2

你实际上可以使用html5，不需要javascript！

除了maxlength属性外，还包括以下属性：

pattern="\d{4}"

“pattern”属性允许您指定用于验证输入的正则表达式模式。

\d是正则表达式，意思是“数字”。 {4}是正则表达式，意味着重复4次。

maxlength属性现在实际上是冗余的，并且可以删除，因为正则表达式将自己限制输入的长度。

总体而言，您的元素可能如下所示：

<input type="text" pattern="\d{4}" name="Examination_number" />

另外只需注意一点：记住客户端验证不等同于服务器端验证也很重要。拥有基本webdev知识的任何人仍然可以向您的服务器发布无效的Examination_Number值。您的服务器也必须能够验证这些值。

Answer 3

使用正则表达式... var regex = / ^ \ d {4} $ /;

当然，抱歉，你可以匹配正则表达式... if（regex.test（examinationnumber））那么好..

您还可以使用isNaN检查值，以确保获取数字，例如： if（！isNaN（examinationnumber））那么好..

完全合并：

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

JavaScript表单，带有验证

3 个答案: