HTML5 提供了一套强大的表单验证机制，可以让前端开发者在不依赖后端代码的情况下，轻松实现数据的合法性检查。通常情况下，我们需要通过点击提交按钮来触发表单验证。但是，在某些场景下，我们可能需要在用户输入完成后，自动触发表单验证，而不需要点击提交按钮。本文将介绍如何实现这一需求。
默认的表单验证方式
在默认情况下，表单的验证需要用户点击提交按钮才会触发。当用户点击提交按钮时，浏览器会对表单中的所有输入控件进行校验，并检查是否满足规定的验证规则。如果有某个输入控件未通过验证，则表单提交被阻止，同时该输入控件会显示出相应的错误信息。
-- -------------------- ---- -------
------
-------
------
------ ------------ ------------ ---------
--------
----
-------
---------
------ --------------- --------------- ---------
--------
----
------- ------------------ -----------
-------上述代码展示了一个简单的登录表单。该表单中包含两个必填字段：电子邮件和密码。当用户点击“Sign in”按钮提交表单时，如果其中有任何一个输入控件未通过验证，将禁止表单提交，并在相关的输入控件下方显示出相应的错误信息。
自动触发表单验证
为了实现不依赖提交按钮的表单验证，我们可以使用 Javascript 来手动触发表单的提交事件。具体来说，我们需要监听表单中的所有输入控件的改变事件。每当用户输入完成一个字符时，我们就手动触发表单的提交事件，从而触发表单验证。
-- -------------------- ---- -------
------
-------
------
------ ------------ ------------ ---------
--------
----
-------
---------
------ --------------- --------------- ---------
--------
----
------- ------------- ------------- -----------
-------
--------
----- ---- - -------------------------------
----- ------------ - ------------------------------------------
------------------------------ -- -- -
-- ---------------------- -
--------------------- - ------
---------------------- -----------------
- ---- -
--------------------- - -----
-
---
------------------------------- -- -- -
-- ----- --------
---
---------上述代码展示了如何在用户输入时自动触发表单验证。该代码中，我们首先获取了表单元素和提交按钮元素。然后，我们通过监听表单元素的 input 事件来实现自动触发表单验证功能。每当用户输入完成一个字符时，我们就检查表单的校验结果，如果表单通过验证，则启用提交按钮，并手动触发表单的提交事件。否则，禁用提交按钮。
需要注意的是，为了防止表单在尚未完成输入时被误提交，我们需要将提交按钮初始状态设置为禁用状态。只有当表单通过验证后，才启用提交按钮。
总结
本文介绍了如何不依赖提交按钮触发标准 HTML5 验证（表单），并提供了相应的示例代码。通过本文的学习，读者可以掌握如何使用 Javascript 实现自动触发表单验证功能。这对于一些复杂的表单场景，比如多个表单之间的联动，或者实时监测用户输入的情况下，都有很大的帮助和指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/15035