10个jQuery表单验证插件

这种流行的文章更新了2016年8月8日,以反映表单验证插件的当前状态。 关于旧文章的评论被删除。

HTML5引入了新的表单属性使浏览器可以本地验证表单。 随着CSS3和JavaScript就可以实现基本的表单验证,而不需要一个插件的-在描述这篇文章 但是,这有一些限制:

  • 错误消息都留给了浏览器本身,你只能提供输入字段标题
  • 你是不是可以自定义错误消息的造型
  • 你必须创建模式输入框的自己

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

1.香菜

一个可扩展的插件,提供像本地化和自定义的验证规则,也可以是远程Ajax验证普通的选项。 该文件是干净的,易于阅读和项目积极维护。 验证规则可以使用HTML5形式或自定义数据属性来控制。

见笔香菜插件演示由SitePoint( @SitePoint上) CodePen

网站
源代码

2. jQuery的表单验证

模块化插件,提供了一个基本的一套默认的验证规则,并允许您根据需要加载其他模块。 例如:文件验证器上传文件时,还要日期,安全或位置的模块。 它还允许你提供输入建议。 验证控制与HTML5数据属性。

见笔jQuery的表单验证插件演示由SitePoint( @SitePoint上) CodePen

网站
源代码

3. jQuery验证插件

其中第一个验证插件从2006年它允许您指定使用HTML5属性或JavaScript对象自定义的验证规则。 它也有很多实现的默认规则,并提供一个API轻松地自己创建的规则。 查找有关该插件的详细信息可以在第一很难和它仅限于jQuery的1.x中,但他们承诺,使其更好地-看到这个活动

见笔jQuery的验证插件演示由SitePoint( @SitePoint上) CodePen

网站
源代码

4.引导验证

一个jQuery验证插件引导。 它基本上只是一个使用HTML5的属性,用本地的表单验证包装,但也可以用来添加自定义规则。 它总是显示在浏览器,自动转换成正确的语言错误消息。

见笔引导验证插件演示由SitePoint( @SitePoint上) CodePen

网站
源代码

5.烟

烟是组件引导的集合 - 包括一个表单验证。 相比于其他引导验证器(#4),它不使用本地浏览器验证 - 因此错误消息不会被自动定位和验证规则有使用HTML5和数据属性,如JavaScript被指定,以及。

见笔烟表单验证插件演示由SitePoint( @SitePoint上) CodePen

网站
源代码

6. FormValidation

溢价jQuery的验证插件从50 $有内置集成自举,基金会等。 它有一个巨大的验证规则以及期权量,可能与许多复杂的表单应用程序是有利可图的。

10个jQuery表单验证插件

网站

7. Validatr

通过浏览器进行表单验证一个非常基本的包装,使用本机错误信息尽可能与HTML5表单属性控制。 它可以被用作填充工具或以定制错误消息的造型。 仅此而已,无所不及。

见笔Validatr插件演示由SitePoint( @SitePoint上) CodePen

网站
源代码

8. Validetta

这个插件提供验证使用数据的属性,具有相当有限的选项。 它配备了只是基本的验证规则,其他一切可以用自定义的正则表达式添加 - 但没有例子来展示它。 相较于其他插件,唯一的独特特征是,错误消息(见下面演示)显示在一个气泡。

见笔Validetta插件演示由SitePoint( @SitePoint上) CodePen

网站
源代码

9. jQuery.validity

一个插件,只用JavaScript控件验证 - 没有HTML5或数据属性。 虽然这可能是动态的验证规则有帮助的,插件没有提供足够的选择,使编写高效。 它甚至不允许使用新的HTML5型属性,如email ,也没有提供的功能来检查的形式是有效的-必要的,以便显示成功消息。

见笔jQuery.validity插件演示由SitePoint( @SitePoint上) CodePen

网站
源代码

10. h5Validate

这个插件已经不幸被它的创建者(埃里克·埃利奥特)抛弃。 因此,演示/文档网站返回404,并有二十几个悬而未决的问题。 该插件不自动按类型验证输入和下面的示例中,即使不显示错误消息。 我们已经包括在列表中,埃里克正在寻找该项目的新的维护者,所以有一个机会,在未来的某个时候,它可能会得到一些生活气息回吧。

见笔h5Validate插件演示由SitePoint( @SitePoint上) CodePen

源代码

结论

嗯,这是流行的jQuery表单验证插件的前十名之列。 如果你有这些方面的经验(好或坏!),或者如果你知道其他表单验证插件值得一提的,请让我们知道在评论!

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