javascript - 如何使用 javascript 验证 jsp 表单(提交时)中的多个文本框？

Question

请原谅我问这个简单的问题。我有一个JSP，其中有多个表单，每个表单都包含多个文本框，这些文本框采用不同类型的文本(例如日期、名称、余额)。如何让用户填写字段然后只提交到服务器？是否可以只使用一个 js 函数？

Answer 1

注意:此答案不使用任何 JSP 或 JavaScript，因为在 HTML5 中不再需要这样做。

您可以在输入上使用 HTML5 的 required 属性，然后通过 :invalid CSS 伪类让用户知道输入未正确填写。它看起来像这样:

HTML:

<form id="myForm" action="#">
    <label>Date: <input type="date" name="date" required></label>
    <br>
    <label>Name: <input type="text" name="firstname" required></label>
        <input type="text" name="lastname" required>
    <br>
    <label>Balance: <input type="number" name="balance" required></label>
    <br>
    <button>Submit</button>
</form>

CSS:

#myForm input:valid {
    background:#AFA;
}
#myForm input:invalid {
    background:#FAA;
}

Demo .

额外信息

• 有关输入类型的完整列表(例如上面列出的类型，以及电子邮件或复选框等)，请参阅 MDN或this interactive page with demos
• 有关 :valid 和 :invalid 跨浏览器兼容性的更多信息，请参阅 MDN :valid和 :invalid

注释

• 这些特定的输入类型也会限制或简化用户的输入。 number 输入将限制只能输入数字(否则将阻止提交表单)，date 输入将向用户阐明应如何输入日期。两者还将简化在这些输入中输入信息
• 请注意，并非所有这些都受旧版浏览器支持，旧版浏览器通常默认为纯文本输入。请参阅caniuse和 MDN's list有关浏览器支持的完整详细信息。
• 切勿仅依赖客户端验证。在客户端修改表单非常容易，这可能会导致 XSS vulnurabilities 。始终验证服务器上的输入是否正确。