6个jQuery Form Wizard插件

jQuery表单向导是一个jQuery插件，可帮助您通过某种形式的表单流（无需刷新页面）来创建表单。例如，如果您有一个用于输入用户数据的大型表单，则可以使用表单向导将其分为一系列相关步骤。这样做的好处是，用户不会因为表格太长而使他们不知所措，而且还可以在输入信息时向他们提供一些有关进度的指示。

在这篇文章中，我们列出了6种我们最喜欢的jQuery表单向导，检查了它们的不同功能，最后看了几个付费选项，以及如何创建自己的。这并不是一个详尽的列表，但是如果您正在寻找jQuery表单向导，那么希望这将为您指明正确的方向。

该热门帖子已于30.08.2017更新。从列表中删除了损坏/废弃的插件，并添加了新插件以反映人们在评论中要求的功能。

1. jQuery步骤

jQuery Steps是一个智能的UI组件，可让您轻松创建类似于向导的界面。该插件将内容分为多个部分，以实现结构化和有序的页面视图。它具有许多功能，例如异步内容加载，状态持久性（保存步骤之间的输入）以及节之间的过渡效果。它可以通过NuGet或bower进行安装，并具有详细记录的功能丰富的API。

设为首页 GitHub | 演示版

2. jQuery智能向导

Smart Wizard是一个具有Bootstrap支持的灵活且可高度自定义的jQuery步骤向导插件。它易于实现，并为您的表单，结帐屏幕，注册步骤等提供简洁时尚的界面。它的功能包括主题支持（包括各种主题），URL导航和步骤选择以及动态隐藏或禁用步骤的能力。它可以通过npm，bower或composer进行安装，并具有详细记录的功能丰富的API。

设为首页 GitHub | 演示版

3. formToWizard

这个轻巧的插件可使用jQuery将任何Web表单转换为多步向导，从而将每个表单<fieldset>转换为带有前进和后退按钮的单独步骤。它没有前两个插件那么多的功能，但是与jQuery验证插件集成在一起以提供验证功能。它是一个文件（因此，您可以从GitHub上获取它并继续使用），并且如果JavaScript不可用，它将正常降级。

GitHub | 演示版

4. jQuery Stepy

jQuery Stepy是一个可生成可自定义表单向导的插件。假定您的表单具有特定的标记结构，并且标记上有特定的类。之后，您只需要初始化插件和模板即可–您有了一个表单向导。

该插件没有任何预定义的样式。但是，它确实具有多种选择，例如能够在步骤之间导航，提供前进，后退和完成按钮，过渡效果以及与您选择的任何验证插件的集成。它提供了一个合理的API，例如，它允许您在步骤之间触发回调，或在呈现当前步骤时触发回调。

设为首页的GitHub

5. Twitter Bootstrap向导

这个Twitter Bootstrap插件使用格式化的可标签结构构建向导。它允许用户使用按钮来构建向导功能，以通过向导的不同步骤和事件来分别链接到每个步骤。该插件的主要优势是与Bootstrap的紧密集成。它具有一些基本功能，例如验证，进度条以及以编程方式启用和删除步骤的功能。除了从GitHub克隆插件外，还可以通过Bower安装（尽管不建议这样做）。它有充分的文档记录，并提供了基本的API。

设为首页 GitHub | 演示版

6. jQuery.wizard

最后，第六名是jQuery.wizard。这是一个异步表单向导，支持分支-人们在注释中要求的内容。

向导的基本结构围绕步骤和分支，后者是可选的。一个简单的线性形式可能只需要一个包含所有步骤的分支，而一个复杂的形式可能需要使用几个分支，甚至嵌套分支。因此，表单中的步骤和分支的数量完全留给开发人员。该向导采用异步有限状态机来确定如何在自身中导航。

该插件的文档非常丰富，并提供了广泛的API。它可以通过npm或Bower进行安装，并且一直兼容到Internet Explorer6。它的设计与各种其他插件很好地集成在一起，包括广受欢迎的jQuery Validation。您可以通过复制存储库并在浏览器中查看examples/index.html来查看各种示例的演示。

的GitHub

奖金

开源软件的世界很棒，而且经常会在选择要在下一个项目中使用的小部件时被宠坏。但是，这并不意味着我们应该回避为实际上给我们带来价值的事情付费。因此，这里有两个付费的表单向导插件。我建议您检查并购买，如果它们适合您：

表单向导–多步骤表单验证
Timon –步骤表单向导+ jQuery步骤表单生成器

最后，如果您是那种宁愿了解幕后事情的人，而不是抢插件，那么也许您可能想看看这些教程，向您展示如何从中创建表单向导刮。

使用jQuery将任何Webform变成功能强大的向导
使用jQuery和CSS的带有进度栏的多步表单

请享用！

结论

因此，您已经掌握了六个jQuery表单向导插件的高级概述，每个插件的功能和优势都有所不同。选择哪种取决于您的项目要求。希望您在这篇文章中找到了对您有用的东西。请在下面发表评论，让我们知道是否错过了什么，或者您最喜欢哪个插件。

From: https://www.sitepoint.com/jquery-form-wizard-plugins/