12个免费的jQuery插件来扩展结账表单功能

作者：JAKE ROCHELEAU 译者：半糖学前端 来源：designbombs

原文：https://www.designbombs.com/jquery-checkout-form-plugins/

如果您正在寻找方法来改进网站的结账表单，以通过卡验证和自定义表单等功能来改善用户体验，那么这些免费的jQuery插件将派上用场。

每个主要的电子商务网站都有自己的结帐流程。这始终是网站唯一的，但遵循相同的流程：用户输入信息，付款然后接收购买的商品。

您可以通过在结帐表单中添加其他功能来加快此过程。在本指南中，我将分享12个最好的免费jQuery插件，以将此必备功能添加到您的结帐和帐单页面。

01. jQuery信用卡验证器

首先是免费的jQuery信用卡验证器插件。如此简单的设置和一些有价值的功能，这绝对是不可思议的。

您可以在GitHub上浏览整个源代码，并将最新副本下载到.zip归档文件中。当信用卡号输入网站时，此插件会自动检测并验证信用卡号。它使用Luhn算法作为校验和来实时验证信用卡号。

每种CC类型都有不同的要求，您可以实时查看这些要求。例如，万事达卡和维萨卡分别具有不同的数字序列。因此，当输入某个抄送号码时，此脚本可以自动检测类型。这使访客在进入他们的卡时有一种信任感。

您可以使用纯jQuery下载源，但也可以在CoffeeScript中进行编辑。主要功能根据卡类型和有效性检查（有效长度，卡号和校验和）采用可选属性。

如果您正在寻找自动CC验证，那么这是您唯一需要的插件。

02.输入掩码

验证信用卡号是一回事。但是，将其正确格式化是一个完全独立的问题，可以使用Inputmask插件进行处理。

这确实包括一个jQuery插件，但它也可以在原始JavaScript上运行。绝对是此列表中更好的插件之一，非常适合格式化输入字段以匹配CC编号中的4位批处理。

但请注意，此插件不仅仅是CC号码掩码。它实际上支持您要屏蔽的任何内容，包括电话号码或邮政编码。您甚至可以传递自定义正则表达式代码来屏蔽所需的任何格式。

Inputmask与CC验证程序插件很好地配对，因为这两个可以将简单的输入字段转换为炸药CC帐单。

03. jQuery AutoTab

在网上购买或注册新网站时，您可能会在某个时候体验过自动标签功能。

这在字段上设置了预定义的字符限制，因此，一旦用户达到该数字，它就会切换到下一个字符。jQuery AutoTab是一个很棒的免费插件，基本上不需要设置即可处理此功能。

使用此插件，您可以将焦点集中在向前或向后的输入上，对文本进行预格式化，然后将用户推到需要的位置。而且它确实支持正则表达式模式，因此您可以定位除简单电话号码以外的更复杂的制表符输入。

04. JavaScript自定义表单

PSD2HTML的团队发布了一个令人惊叹的定制表单包，称为JCF或JavaScript Custom Forms。

这是一个平滑的跨浏览器输入库，用于自定义表单的所有输入。下拉菜单选择，单选按钮，范围，数字滑块，文件上传等等。

您可以在主站点上看到所有元素的完整演示以及下载链接。整个库都在jQuery上运行，因为它还支持选择字段和切换输入（收音机/复选框）的自定义行为。

如果您正在寻找真正定制的结帐表格，则必须尝试JCF。它在GitHub上免费提供，并支持所有主流浏览器，包括IE 8+。

05. jQuery Mask插件

您可能会喜欢的另一个屏蔽插件是名称恰当的jQuery Mask Plugin。它由开发人员Igor Escobar创建，并在GitHub上免费提供了一个实时演示以进行测试。

我认为这个插件的实现非常容易遵循，特别是对于初学者。您只需将所需的格式传递给mask（）函数，并使用jQuery定位正确的输入字段。这样您就可以格式化日期，邮编，价格，几乎所有内容。

演示页面包含完整的文档，因此您甚至可以将代码直接复制/粘贴到您的项目中。一个非常出色的插件，无需任何繁琐的工作即可开始进行基本形式的自定义。

06.表单验证器

输入字段验证是最难破解的主题之一。根据您对密码，电子邮件地址，送货地址或结帐页面上其他任何内容的要求，这需要大量自定义代码。

在jQuery的表单验证插件是完全免费的，你可以用最好的一个。它在npm，Bower和GitHub上免费托管。

一个很大的好处是此插件如何保持HTML的干净。您可以将自定义数据属性传递到该字段中以创建验证设置，而无需编写任何JavaScript。在声明该字段有效之前，必须满足这些数据属性中的每个属性。

例如，您可以将data-validation-length =“ 6”传递到密码输入上，以强制输入至少6个字符或更多的密码。

请注意，此插件有很多功能可以使用。您可以使用侧面导航在首页上找到完整的文档，以浏览不同的设置。

如果要在本地或在诸如CodePen的浏览器IDE中进行测试，也可以在CDNJS上找到整个库。

07. jQuery验证引擎

内联表单验证有多种形式。在jQuery验证引擎目前处于2.6版本最流行的选择之一。

它已经在线超过7年，并且主要通过开发人员的贡献进行更新。但这是一个非常安全的插件，具有非常简单的设置。您只需创建字段，定义输入验证，然后设置工具提示消息。

有一个有点俗气，但可使用的演示在这里，你可以自己试一试。所有这些都通过具有自定义功能（例如日期范围，时间设置或信用卡号）的验证引擎运行。

您还可以在GitHub页面上找到完整的源代码，以方便访问。

08.工具提示

工具提示提供了一个完美的解决方案，可以使访问者与您保持联系，并解释每个字段以及如何正确填写。

该Tooltipster插件是完全免费和最好的周围之一。您可以为每个字段设置一系列自定义样式，位置和动画。您可以在Tooltipster网站上找到实时演示以及文档和浏览器支持。

在所有可用的工具提示插件中，到目前为止，这是我的最爱。当前版本为4.0，支持所有HTML5输入字段。您可以在用户将鼠标悬停在字段上，单击/选择或输入文本或任何您想要的内容时显示工具提示。

您控制触发点，工具提示器将执行其他所有操作。

要查看动画和选项的完整列表，请查看GitHub存储库并下载副本。

09.臭小费

Poshy Tip是另一个很棒的工具提示库。这有点老，但它确实支持现代jQuery和大多数现代浏览器。

您可以在网站上找到完整的演示示例，以及有关设置插件的文档。这些技巧确实看起来很漂亮，但是它们在动画方面有所限制。这就是Tooltipster超越此插件而脱颖而出的原因之一。

但是，如果您只需要简单高效的产品，Poshy Tip会做的很好。

10.日期选择器

此列表中的最新插件之一是由开发人员Fengyuan Chen创建的自定义datepicker UI。它在GitHub上免费提供，并带有精美的日历输入设计。

您可以将其添加到任何输入字段中，以设置其样式以选择日期，月份和年份。它确实具有触摸支持，因此它应可在所有移动设备上使用。更不用说它具有完全的响应能力，并具有一些不同的内联样式。

这是一个非常简单的设置插件，并具有许多可以扩展的功能。最好的方法是在jQuery上运行，因此它可以与您使用的任何其他插件完全匹配。

11. DataTextEntry.js

DataTextEntry.js是一个干净的jQuery插件，具有一些非常基本的功能。它为日期字段创建自动验证和格式设置。

它不是像上面的完整的datepicker插件。相反，这是一个支持常规输入字段的基本格式设置插件。这是在考虑键盘用户的情况下构建的，以实现最高级别的可访问性。

但这是一个非常简单的插件，因此，如果您不需要基于日期的格式，则无需为此担心。

12. Selectize.js

最后但同样重要的是Selectize.js。这个非常独特的插件使您可以将选择菜单转换为文本框，以便一次选择多个项目。

您可以在插件页面上使用许多不同的样式查看一些实时演示。该插件在选择字段下方支持选项标题甚至字幕。使用“远程获取”选项，您甚至可以从外部API提取数据并将这些项目加载到选择字段中。

整个插件是完全免费的，可以从GitHub下载。我认为它不会适合所有结帐表格，但是对于较大的选择字段，它无疑提供了独特的价值。

结论

由于这些插件是免费使用的，因此您可以轻松地对每个插件进行测试，直到找到适合您网站的最佳选项为止。只要记住要留意网站性能和页面加载时间。

我是@半糖学前端 ，今天分享结束了，看完记得给个赞哟。关注我了解更多前端知识，一起学习共同进步！