10 jQuery表单验证插件

钥匙要点

• > HTML5引入了基于浏览器的表单验证的新表单属性，但是它具有无法自定义错误消息和样式的限制，并且需要为输入字段创建模式。 jQuery表单验证插件旨在克服这些局限性。
• >本文提供了10个流行的jQuery表单验证插件的列表，包括欧芹，jQuery form验证器，jQuery验证插件，Bootstrap验证器，Smoke，FormValidation，Validatr，valtatr，valteretta，jquery.Validity和H5Validate。每个插件具有独特的功能，例如自定义验证规则，本地化，远程AJAX验证，输入建议等。
jQuery表单验证插件通过检查表单字段中针对预定义的规则中输入的数据来工作。他们提供有关错误的立即反馈，使用户可以在提交表格之前对其进行纠正。大多数插件都允许自定义错误消息，并且通常与支持JavaScript和JQuery的所有现代浏览器兼容。
• >
这篇受欢迎的文章于2016年8月8日更新，以反映表单验证插件的当前状态。与旧文章有关的评论已删除。

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

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

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

1。欧芹

>可扩展的插件，可提供常规选项，例如本地化和自定义验证规则，也提供远程AJAX验证。该文档很干净，易于阅读，并且该项目得到了积极维护。可以使用HTML5表单或自定义数据属性来控制验证规则。>

>请参阅codepen上的sitepoint（@sitepoint）的笔欧洲式插件演示。

网站 源代码

2。 jQuery形式验证器

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

>

>请参阅codepen上的sitepoint（@sitepoint）的pen jquery form validator插件。

网站 源代码

3。 jQuery验证插件

> 2006年以来的第一个验证插件之一。它使您可以使用HTML5属性或JavaScript对象指定自定义验证规则。它还实施了许多默认规则，并提供了API来轻松创建规则。一开始可能很难找到有关该插件的详细信息，并且仅限于JQuery 1.X，但他们承诺将使它变得更好 - 请参阅此广告系列。

>

>请参阅codepen上的sitepoint（@sitepoint）的笔jQuery验证插件。

网站 源代码

4。 Bootstrap验证器

Bootstrap的jQuery验证插件。基本上，它只是使用HTML5属性围绕本机验证的包装器，但也可以用于添加自定义规则。它总是显示浏览器中的错误消息，自动翻译成正确的语言。

>

>请参阅codepen上的sitepoint（@sitepoint）的笔bootstrap验证器插件。

网站 源代码

5。烟

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

>请参阅codepen上的SitePoint（@sitepoint）的笔烟验插件。

网站 源代码

6。 formvalidation

>一个高级jQuery验证插件，来自50美元，带有Bootstrap，Foundation等的内置集成。它具有大量的验证规则和选项，并且可以为具有许多复杂形式的应用程序有利可图。

>网站

7。 videAtr

>非常基本的包装器，可通过浏览器使用本机错误消息，可在可能的情况下使用HTML5表单属性控制。它可以用作polyfill或自定义错误消息样式。仅此而已。

>

>请参阅codepen上的sitepoint（@sitepoint）的笔valtatr插件。

网站 源代码

8。有效

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

>请参阅codepen上的SitePoint（@sitepoint）的Pen VieltETTA插件。

网站 源代码

9。 jQuery.vality

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

>请参阅codepen上的sitepoint（@sitepoint）的pen jquery.vality插件。

网站 源代码

10。 H5Validate

不幸的是，这个插件已被其创建者（Eric Elliott）放弃。因此，演示/文档网站返回404，有两十个公开问题。该插件不会自动按类型验证输入，以下示例甚至没有显示错误消息。我们将其包括在列表中，因为埃里克（Eric）正在为该项目寻找新的维护者，因此有可能在将来的某个时候，它可能会恢复过来。

>请参阅codepen上的SitePoint（@sitepoint）的Pen H5Validate插件演示。

源代码

结论

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

经常询问有关jQuery表单验证插件的问题（常见问题解答）

什么是jQuery表单验证插件？

jQuery表单验证插件是有助于验证网页上“表单”字段中输入的数据的工具。他们确保用户输入的数据是正确的，并在提交服务器之前以所需的格式以所需的格式。这些插件是使用jQuery构建的，该插件是一个快速，小且功能丰富的JavaScript库。它们提供了一种简单有效的方法来验证形式字段，减少所需的手动编码量。

> jQuery表单验证插件如何工作？

jQuery表单验证插件通过检查表单字段中在某些预定义规则中输入的数据来工作。这些规则可以包括检查所需字段，有效的电子邮件地址，匹配密码，最小和最大输入长度等等。如果输入的数据不符合这些规则，则该插件将显示错误消息，以防止表单提交到纠正错误之前。

>

为什么我要使用jQuery form corm验证插件？使用jQuery表单验证插件可以大大简化表单验证的过程。他们使您不必编写复杂的JavaScript代码以分别验证每个表单字段。它们还提供了一种一致的方法来处理各种浏览器和设备之间的形式验证。此外，它们通过提供任何错误的立即反馈来改善用户体验jQuery表单验证插件，您首先需要在网页中包含jQuery库。然后，您可以下载插件，并使用脚本标签将其包含在网页中。某些插件还可能需要包括其他CSS文件来造成错误消息。

我可以自定义由jQuery form form form form form form corm验证插件显示的错误消息吗？

是的，是的，大多数jquery form vermination验证插件允许您自定义错误消息。您可以更改消息的文本，显示它们的样式，甚至是编写它们的语言。这使您可以根据自己的特定需求以及用户的语言和文化来定制错误消息。

> jQuery form form form验证插件与所有浏览器兼容吗？

jQuery form vermation验证插件通常是与支持JavaScript和JQuery的所有现代浏览器兼容。但是，兼容性级别可能会在不同的插件和同一插件的不同版本之间有所不同。在不同的浏览器中测试插件总是一个好主意，以确保其按预期工作。

我可以在同一网页上使用多个jQuery form验证插件？可以在同一网页上使用多个jQuery表单验证插件，通常不建议使用。使用多个插件可能会导致冲突，并且可以使网页加载和响应较慢。通常最好选择一个满足您所有需求并坚持下去的插件。

>

>如何更新jQuery表单验证插件？

以更新jQuery表单验证插件，您可以下载最新版本的插件，并将旧文件替换为新文件。某些插件还可以提供一个更新功能，该功能自动下载并安装了最新版本。

>

>我可以将jQuery表单验证插件与其他JavaScript库吗？但是，您需要小心避免库之间的冲突。 jQuery提供了一个Noconflict函数，可让您与使用$符号的其他库一起使用jQuery。

是否有jQuery表单验证插件的替代方法？形式验证插件。这些包括本机HTML5表单验证，服务器端验证以及其他JavaScript框架（例如AngularJS和React）的验证库。但是，由于其易用性和广泛的功能，jQuery Form验证插件仍然是一个流行的选择。

以上是10 jQuery表单验证插件的详细内容。更多信息请关注PHP中文网其他相关文章！