JavaScript表单,带有验证

用户名

我目前正在使用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>
格希

您实际上可以为此使用html5,不需要javascript!

与maxlength属性一起,包括以下属性:

pattern="\d{4}"

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

\d正则表达式是“数字”的意思。{4}是正则表达式,表示精确重复4次。

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

因此,总的来说,您的元素可能看起来像:

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

JavaScript表单,带有验证

来自分类Dev

带有验证的HTML表单

来自分类Dev

带有反跳的异步表单验证?

来自分类Dev

带有验证的AngularJs动态表单生成

来自分类Dev

带有验证的AngularJs动态表单生成

来自分类Dev

带有Web表单的jQuery验证

来自分类Dev

带有输入颜色的jQuery表单验证

来自分类Dev

带有按钮状态的表单验证

来自分类Dev

如何制作带有验证的JavaScript表单,提交后不起作用

来自分类Dev

带有表单验证(PHP)的表单提交预览

来自分类Dev

没有Alert()的JavaScript验证表单

来自分类Dev

使用带有reCAPTCHA的jquery验证输入表单

来自分类Dev

带有提交和重置按钮的AngularJS表单验证

来自分类Dev

使用angular ngMessage的带有错误消息的表单验证

来自分类Dev

在MVC的客户端验证带有模型状态的表单

来自分类Dev

带有整数字段的Django Graphene表单验证

来自分类Dev

带有提交和重置按钮的AngularJS表单验证

来自分类Dev

局部视图中带有AJAX表单的验证摘要

来自分类Dev

使用django验证带有引发错误的表单

来自分类Dev

带有动态错误消息的angularJs表单验证

来自分类Dev

带有提交/取消按钮的AngularJS验证表单

来自分类Dev

带有密码强度检查的 jQuery 表单验证

来自分类Dev

带有工具提示的 jQuery 表单验证器

来自分类Dev

ASP.NET MVC Ajax 提交带有 AntiforgeryToken 的表单和带有验证的序列化表单数据

来自分类Dev

JavaScript表单验证无法验证

来自分类Dev

JavaScript验证表单OR函数

来自分类Dev

表单验证Javascript

来自分类Dev

HTML表单的javascript验证

来自分类Dev

使用JavaScript验证表单