JavaScript 表单，带验证答案

【问题标题】：JavaScript Form, with validationJavaScript 表单，带验证
【发布时间】：2014-05-16 03:44:05
【问题描述】：

我目前正在使用 html 来编写“表单条目”。我还使用 JavaScript 验证来验证表单的输入。到目前为止，我有“姓名”、“科目”和“考试编号”。但是，我的验证不适用于我的考试编号。对于考试编号，我希望验证以确保输入仅为 4 位数字，因此我添加了“maxlength =“4”。如果有人可以帮助我进行此验证，首先验证考试编号并确保输入是四位数字，这将非常有帮助，谢谢

这是我的代码：

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

【问题讨论】：

标签： javascript html forms validation

【解决方案1】：

这不是 .value == "4" 它是 .value.length == 4

【讨论】：

您可以，但您不必... javascript 与类型无关（大部分情况下）
但是，坦率地说...我会像其他人建议的那样使用正则表达式...并处理每个字段的所有验证案例，即不为空、长度、数据类型等.
好的，我加了引号，但我去掉了'4'，因为它只会在四位数时验证，我希望它在没有输入时验证。所以这是我的新部分 if (document.ExamEntry.Examination_number.value.length =="") { ，谢谢你的帮助
对不起...我误解了...我真的会按照下面的建议实施正则表达式解决方案

【解决方案2】：

您实际上可以为此使用 html5，无需 javascript！

与 maxlength 属性一起，包括这个属性：

pattern="\d{4}"

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

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

maxlength 属性现在实际上是多余的，可以删除，因为正则表达式会自行限制输入的长度。

总的来说，您的元素可能如下所示：

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

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

【讨论】：

我要在 maxlength 之后添加 pattern="\d{4}" 吗？还是我用它替换maxlength？另外，您发布无效的考试号码值是什么意思，这是否意味着不是数字的字符？如果是这样，我该如何改变？
我编辑以回答您的第一个问题。就服务器端验证而言，这是一个相当不同的问题，并且特定于您使用的任何服务器端语言。不过，一般的想法是，您的服务器端代码必须自己验证任何传入的输入 - 在这种情况下，执行正则表达式验证，但使用您的服务器端语言而不是 js。
你有没有用这种方法运气？
我确实在正则表达式验证中包含了这个，谢谢你的帮助：0
这是我的荣幸！如果您对这个答案感到满意，我会喜欢复选标记（我终于有足够的代表来否决东西了耶！！！）

【解决方案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;
}

【讨论】：

谢谢亚当，我肯定会使用这个，但是我测试了它，当出现错误时，例如我输入'abcd'作为考试编号，出现一条错误消息说它应该只是数字，这很好，但是当我点击确定尝试另一个输入时，它提交了。请帮忙
它到底提交了什么？
它提交了表格，好像所有输入都正确，这是直接在错误消息之后，不允许用户输入另一个检查号
你是不是忘了把 result = false;在验证结束时？
我刚刚添加了它，它适用于一些输入，但是当没有输入时它是相同的，显示错误消息并且当我单击确定时，表单已提交，我应该输入结果=假；每条消息之后？