如何在仍然运行 HTML 验证（最小长度、最大长度、模式...）的同时使用 JavaScript 提交表单

Posted 2023-02-18

【中文标题】如何在仍然运行 HTML 验证（最小长度、最大长度、模式...）的同时使用 JavaScript 提交表单

【英文标题】：How can I submit a form using JavaScript while still running HTML validations (minlength, maxlength, pattern...)

【发布时间】：2021-12-05 01:46:18

【问题描述】：

我正在使用 ReCAPTCHA，这意味着我必须从 JS 提交表单，而不是 html，但 HTMLFormElement.submit() 并没有首先确认表单是有效的，我已经写了一些我希望仍然有效的检查.我看到的唯一解决方案是在 JS 中编写所有检查（对于想要自定义检查的人）和使用 JQuery 的检查。所有解决方案似乎都没有显示在不可取的字段下方的浏览器样式的错误消息。有没有一种简单的方法可以做到这一点，还是我必须做一些事情，比如遍历所有字段并手动验证它们？最好，我还想在 ReCAPTCHA 甚至生成分数之前运行检查，但我怀疑这是可能的，因为 ReCAPTCHA 的 API 似乎有多么有限。值得注意的是，我已经在服务器端手动验证了值，因为我知道人们很容易绕过这些检查，但我想避免不必要的 POST 请求并能够使用浏览器样式的错误消息。

【参考方案1】：

首先，您在一篇文章中有太多问题/问题。通常，您应该在询问之前尽可能多地尝试自己解决问题。以下是我发现的一些问题：

表单验证过程与表单提交过程不冲突。 recaptcha 是在验证之前还是之后进行并不是一个重要的问题，但绝大多数使用它的表单都在验证之后进行。 尽量避免使用 JQuery，因为它会添加不需要的依赖项。 Pure JS 同样强大。 如果您想要一个样式漂亮的错误消息 - 这是一个完全不同的问题，与重新验证或表单提交无关。您现在谈论的是 DOM 编辑和样式设置。 在recaptcha 之前运行某些东西是时间问题，而不是Recaptcha API 的限制。一切尽在您的掌控之中。 服务器端验证和客户端验证都是需要的，但它们在很大程度上扮演着不同的角色：客户端更适合用户友好的错误报告，而服务器端是对用户输入的真正验证。使它们保持紧密同步是一个很好的做法。因此，进行 BE 验证并不能作为您进行 FE 验证的借口。 您不需要额外的 POST 请求来进行 FE 验证。对于客户端无法验证的事情，需要在验证期间与后端进行额外的通信。 最后，您可以在将负载提交到服务器之前进行验证。我建议看一下异步的概念：https://developer.mozilla.org/en-US/docs/Web/javascript/Reference/Statements/async_function 这是为了在收到 Recaptcha 的响应并完成 FE 验证后提交表单。 Promises 是通常使用起来很舒服的方式：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

【讨论】：

我很困惑。我只问了一个问题，并给出了 2 种我认为可以绕过的方法，但找不到如何去做。我在发布之前研究了几个小时，我认为这足以说明我自己已经尝试过了。你说的很多事情要么只是你重申了我在帖子中已经说过的事情，要么是我知道但并没有真正问过的事情