在前端表单验证中，有时候我们需要验证两个输入字段中的一个是否已经填写。这种情况下，我们可以使用 jQuery Validation 插件来方便地实现这个功能。本文将介绍如何使用该插件并提供示例代码。
步骤一：引入 jQuery 和 jQuery Validation
首先，在 HTML 页面的 <head> 中引入 jQuery 和 jQuery Validation：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
步骤二：设置验证规则和消息
然后，在 <script> 标签中，设置需要验证的两个字段的规则和错误提示消息：
-- -------------------- ---- -------
-----------------------
------ -
------- -
--------- ----------------- -
------ ------------------ -- ---
-
--
------- -
--------- ----------------- -
------ ------------------ -- ---
-
-
--
--------- -
------- -----------
------- ----------
-
---注意，required 规则是根据另一个字段是否为空来判断是否需要验证当前字段的。在上述代码中，如果 #field2 的值为空，则需要验证 #field1；如果 #field1 的值为空，则需要验证 #field2。
步骤三：添加表单元素和提交按钮
接下来，在 HTML 页面中添加需要验证的表单元素和一个提交按钮：
-- -------------------- ---- -------
----- ------------
------ -------------------------
------ ----------- ------------- ------------
------ -------------------------
------ ----------- ------------- ------------
------- -------------------------
-------步骤四：测试代码
最后，我们可以测试一下代码是否正确。在填写了 #field1 或 #field2 中的任意一个之后点击提交按钮，如果另一个字段没有填写，则会提示错误消息。
以下是完整的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
------------- ---------- - --- ------- ---- -------- -- ---- -- -----------
------- -----------------------------------------------------------
------- ----------------------------------------------------------------------------------------
--------
---------------------------- -
-----------------------
------ -
------- -
--------- ----------------- -
------ ------------------ -- ---
-
--
------- -
--------- ----------------- -
------ ------------------ -- ---
-
-
--
--------- -
------- -----------
------- ----------
-
---
---
---------
-------
------
----- ------------
------ -------------------------
------ ----------- ------------- ------------
------ -------------------------
------ ----------- ------------- ------------
------- -------------------------
-------
-------
-------结论
在本文中，我们介绍了如何使用 jQuery Validation 插件来实现两个输入字段中只需要填写一个的表单验证。这种技术可以应用于许多不同的场景，例如注册表单、搜索表单等。熟练掌握此技能将有助于提高前端开发者的效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/606edd0a2d2a29a3c1201eba