返回错误时的 HTML 表单验证

Question

我想知道是否有某种方法可以在返回错误时验证 HTML 表单。例如，我有一个表单，用户可以在其中输入他们的字符串，然后用于查询与该字符串相关的数据。理想情况下，如果用户输入错误的字符串(即大写或拼写错误)，我想要一种验证表单的方法。但我认为这只有在系统尝试获取响应该字符串的数据后才能实现。

我希望 Stack Overflow 是一个合适的地方来问这个问题。在环顾四周希望找到我的问题的答案之后，我似乎无法找到解决这个问题的有效方法。

HTML 中是否有一种方法可以在返回错误时验证表单？很抱歉，如果这是显而易见的，我对验证表单的概念还很陌生。

提前致谢。

Answer 1

https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation

您正在寻找的实际上是新技术 AFAIK。曾几何时，您需要使用脚本语言，即 JavaScript 来做这样的事情。但事实证明你实际上可以添加 regular expressions 、值的范围、长度的范围，以及更多直接进入您的 HTML 的每个输入，浏览器将为您完成所有工作。

来自上面 MDN 源的示例

<form>
  <label for="choose">Would you prefer a banana or a cherry?</label>
  <input id="choose" name="i_like" required pattern="banana|cherry" />

  <button>Submit</button>
</form>

您输入的内容需要，并且必须与banana 或cherry 完全匹配。浏览器将处理通知用户输入无效的过程，并阻止您向服务器提交。

这是我用上面的代码块制作的一个实例:https://codepen.io/anon/pen/zjdrbV

但有时，您可能需要验证一个输入，而该输入的要求超出了 HTML 验证所能提供的范围。

在这种情况下，您只需编写一些 JavaScript。这是一个很好的例子:https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation在 Limiting a file before upload 部分下。这类事情上有大量资源，而且您很可能会找到大量帮助，以帮助您验证几乎所有需要验证的输入。