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

Question

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

Answer 1

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

1. 表单验证过程与表单提交过程不冲突。
2. recaptcha 是在验证之前还是之后进行并不是一个重要的问题，但是绝大多数使用它的表单都在验证之后进行。
3. 尽量避免使用 JQuery，因为它添加了不需要的依赖项。 纯 JS 也同样强大。
4. 如果您想要一个样式精美的错误消息 - 这是一个完全不同的问题，与 recaptcha 或表单提交无关。 您现在谈论的是 DOM 编辑和样式。
5. 在 recaptcha 之前运行一些东西是一个时间问题，而不是 Recaptcha 的 API 的限制。 这完全在你的权力范围内。
6. 服务器端验证和客户端验证都是需要的，但它们在很大程度上扮演着不同的角色：客户端更多是为了用户友好的错误报告，而服务器是对用户输入的真正验证。 让它们保持紧密同步是一个很好的做法。 因此，进行 BE 验证并不能成为您进行 FE 验证的借口。
7. 您不需要额外的 POST 请求来进行 FE 验证。 对于客户端无法验证的内容，需要在验证期间与后端进行额外的通信。
8. 最后，您可以在将有效负载提交到服务器之前进行验证。 我建议看一下异步的概念： 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