jquery表单验证插件_10个jQuery表单验证插件

jquery表单验证插件

这篇热门文章于2016年8月8日更新，以反映表单验证插件的当前状态。 与旧文章有关的评论已删除。

HTML5引入了新的表单属性，以便浏览器可以本地验证表单。 使用CSS3和JavaScript，您无需插件即可实现基本的表单验证-如本文所述 。 但这有一些限制：

• 错误消息留给浏览器本身，您只能提供输入字段的标题
• 您无法自定义错误消息的样式
• 您必须自己为输入字段创建模式

以下10个jQuery表单验证插件为自己设置了自定义错误消息和样式以及简化验证规则创建的目标。

1.欧芹

一个可扩展的插件，提供了诸如本地化和自定义验证规则之类的常规选项，还提供了远程Ajax验证。 该文档干净整洁，易于阅读，并且该项目得到了积极维护。 验证规则可以使用HTML5表单或自定义数据属性进行控制。

请参阅CodePen上的SitePoint （ @SitePoint ）提供的Pen Parsley插件演示 。

网站
源代码

2. jQuery表单验证器

模块化插件，默认情况下提供一组基本的验证规则，并允许您按需加载更多模块。 例如：上传文件时的文件验证器，以及日期，安全性或位置模块。 它还允许您提供输入建议。 验证由HTML5数据属性控制。

请参阅CodePen上的SitePoint （ @SitePoint ）的Pen jQuery表单验证程序插件演示 。

网站
源代码

3. jQuery验证插件

2006年以来首批验证插件之一。它使您可以使用HTML5属性或JavaScript对象指定自定义验证规则。 它还实现了许多默认规则，并提供了一个API可以自己轻松创建规则。 首先，很难找到有关该插件的详细信息，并且仅限于jQuery 1.x，但他们承诺会做得更好-请参见此活动 。

请参阅CodePen上的SitePoint （ @SitePoint ）的Pen jQuery验证插件演示 。

网站
源代码

4.引导验证器

Bootstrap的jQuery验证插件。 基本上，它只是使用HTML5属性进行本机表单验证的包装，也可以用于添加自定义规则。 它始终显示来自浏览器的错误消息，并自动翻译成正确的语言。

请参阅CodePen上的SitePoint （ @SitePoint ）的Pen Bootstrap验证程序插件演示 。

网站
源代码

5.烟

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

原价$ 11.95 您的完全免费

免费获得这本书

Smoke是Bootstrap组件的集合-包括表单验证器。 与其他Bootstrap验证器（＃4）相比，它不使用本机浏览器验证-因此不会自动本地化错误消息，并且必须使用HTML5和数据属性以及JavaScript指定验证规则。

请参阅CodePen上的SitePoint （ @SitePoint ）提供的Pen Smoke Form验证插件演示 。

网站
源代码

6. FormValidation

售价50美元起的高级jQuery验证插件，内置了针对Bootstrap，Foundation等的集成。 它具有大量的验证规则和选项，对于具有许多复杂形式的应用程序来说可能是有利可图的。

网站

7.验证码

浏览器的一种非常基本的包装器，用于表单验证，它尽可能使用本机错误消息，并由HTML5表单属性控制。 它可以用作polyfill或自定义错误消息样式。 仅此而已。

见笔Validatr插件演示由SitePoint（ @SitePoint上） CodePen 。

网站
源代码

8. Validetta

该插件提供了使用data属性进行验证的选项，但功能非常有限。 它仅包含基本的验证规则，其他所有内容都可以使用自定义正则表达式添加-但没有示例可以证明它。 与其他插件相比，唯一的功能是错误消息显示在气泡中（请参见下面的演示）。

见笔Validetta插件演示由SitePoint（ @SitePoint上） CodePen 。

网站
源代码

9. jQuery.validity

仅用于使用JavaScript控制验证的插件-无HTML5或数据属性。 尽管这对于动态验证规则可能有所帮助，但该插件没有提供足够的选项来提高编写效率。 它甚至不允许使用新HTML5类型的属性（例如email ，也没有提供检查表单是否有效的功能-这是显示成功消息所必需的。

请参阅CodePen上的SitePoint （ @SitePoint ）的Pen jQuery.validity插件演示 。

网站
源代码

10. h5Validate

不幸的是，该插件已被其创建者（Eric Elliott）放弃。 因此，演示/文档网站将返回404，并且存在两打未解决的问题。 插件不会按类型自动验证输入，以下示例甚至不显示错误消息。 我们已经将它包括在列表中，因为Eric正在为该项目寻找新的维护者，因此在将来的某个时候，它可能会重新焕发生命。

见笔h5Validate插件演示由SitePoint（ @SitePoint上） CodePen 。

源代码

结论

好吧，这是流行的jQuery表单验证插件的前十名。 如果您有任何经验（好或坏！），或者您知道其他值得一提的表单验证插件，请在评论中告知我们！

翻译自: https://www.sitepoint.com/10-jquery-form-validation-plugins/

jquery表单验证插件