推广 热搜: csgo  vue  angelababy  2023  gps  新车  htc  落地  app  p2p 

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

   2023-08-21 网络整理佚名1950
核心提示:如果您正在寻找方法来改进网站的结账表单,以通过卡验证和自定义表单等功能来改善用户体验,那么这些免费的插件将派上用场。在本指南中,我将分享12个最好的免费插件,以将此必备功能添加到您的结帐和帐单页面。在的表单验证插件是完全免费的,你可以用最好的一个。相反,这是一个支持常规输入字段的基本格式设置插件。您可以在插件页面上使用许多不同的样式查看一些实时演示。

原来的:

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

每个主要的电子商务网站都有自己的结账流程。 这对于该网站来说始终是唯一的,但遵循相同的流程:用户输入信息,付款,然后收到购买的商品。

您可以通过向结账表单添加附加功能来加快流程。 在本指南中,我将分享 12 个最佳免费插件,以将这一必备功能添加到您的结帐和计费页面。

01.信用卡验证器

首先是免费的信用卡验证器插件。 如此简单的设置和一些有价值的功能,这绝对令人难以置信。

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

每种CC类型都有不同的要求,您可以实时查看。 例如, 和 Visa 都有不同的数字序列。 因此,当输入某个 CC 编号时,该脚本可以自动检测类型。 这让访客在输入卡片时有一种信任感。

您可以使用纯下载源,但也可以在其中进行编辑。 主函数根据卡类型和有效性检查(有效长度、卡号和校验和)采用可选属性。

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

02.输入掩码

验证信用卡号是一回事。 然而,正确格式化它是一个完全独立的问题,可以通过插件来处理。

这确实包括一个插件,但它也适用于原始版本。 绝对是此列表中更好的插件之一,非常适合格式化输入字段以匹配 CC 编号中的 4 位数字批次。

但请注意,该插件不仅仅是一个 CC 号码掩码。 它几乎支持您想要阻止的任何内容,包括电话号码或邮政编码。 您甚至可以传递自定义正则表达式代码来屏蔽您想要的任何格式。

与 CC 验证器插件完美搭配,因为这两个插件可以将简单的输入字段变成炸药 CC 账单。

03.

在进行在线购买或注册新网站时,您可能在某些时候经历过自动标记。

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

使用此插件,您可以专注于向前或向后输入,预先格式化文本,并将用户推送到他们需要的地方。 而且它确实支持正则表达式模式,因此您可以定位简单电话号码之外的更复杂的选项卡式输入。

04. 自定义表格

团队发布了一个令人惊叹的自定义表单包,称为 JCF 或 Forms。

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

您可以在主站点上看到所有元素的完整演示以及下载链接。 整个库在其上运行,因为它还支持选择字段和切换输入(单选/复选框)的自定义行为。

如果您正在寻找真正定制的结帐表格,您必须尝试 JCF。 它可以在 www 上免费获得,并支持所有主要浏览器,包括 IE 8+。

05.遮罩插件

您可能会喜欢的另一个屏蔽插件是正确命名的 Mask。 它是由开发人员 Igor 创建的,并且可以在 上免费获得现场演示。

我认为这个插件的实现非常容易理解,特别是对于初学者来说。 您只需将所需的格式传递给 mask() 函数并使用正确定位的输入字段即可。 通过这种方式,您可以设置日期、邮政编码、价格以及几乎任何内容的格式。

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

06.表单验证器

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

表单验证插件是完全免费的,并且是您可以使用的最好的插件之一。 它在 npm、Bower 和 .

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

例如,您可以在密码输入中传递 data--="6" 以强制密码至少包含 6 个字符或更多。

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

如果您想在本地或在浏览器 IDE 中进行测试,整个库也可以在 CDNJS 上使用,例如

07. 认证引擎

内联表单验证有多种形式。 当前版本 2.6 中验证引擎中最受欢迎的选择之一。

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

这里有一个有点俗气但有效的演示,所以你可以自己尝试一下。 所有这些都通过具有自定义功能(例如日期范围、时间设置或信用卡号码)的验证引擎运行。

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

08. 工具提示

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

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

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

您控制触发点,工具提示完成其他所有工作。

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

09.臭小费

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

您可以在网站上找到完整的演示示例,以及有关设置插件的文档。 这些技巧看起来确实很漂亮,但在动画方面却有些局限性。 这是该插件的突出特点之一。

但如果您只需要简单而高效的东西,Poshy Tip 就可以了。

10.日期选择器

此列表中最新的插件之一是由开发人员 Chen 创建的 UI。 它在 上免费提供,并带有漂亮的日历输入设计。

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

这是一个设置非常简单的插件,并且具有许多可以扩展的功能。 执行此操作的最佳方法是在 上运行,因此它可以与您使用的任何其他插件完美配合。

11..js

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

它不是像上面那样的完整插件。 相反,这是一个支持常规输入字段的基本格式化插件。 这是专为键盘用户设计的,旨在提供最高级别的可访问性。

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

12..js

最后但并非最不重要的是.js。 这个非常独特的插件允许您将选择菜单转换为文本框,以便一次选择多个项目。

您可以在插件页面上查看一些具有多种不同风格的现场演示。 该插件支持选项标题,甚至支持选择字段下方的字幕。 使用“远程获取”选项,您甚至可以从外部 API 获取数据并将这些项目加载到选择的字段中。

整个插件完全免费,可以从 . 我认为它并不适合所有结帐表单,但对于较大的选择字段,它确实提供了独特的价值。

综上所述

由于这些插件可以免费使用,因此您可以轻松测试每个插件,直到找到最适合您网站的选项。 请记住留意网站性能和页面加载时间。

 
反对 0举报 0 收藏 0 打赏 0评论 0
 
更多>同类资讯
推荐图文
推荐资讯
点击排行
网站首页  |  关于我们  |  联系方式  |  使用协议  |  版权隐私  |  网站地图  |  排名推广  |  广告服务  |  积分换礼  |  网站留言  |  RSS订阅  |  违规举报
Powered By DESTOON