飞码网-免费源码博客分享网站

点击这里给我发消息

10个jQuery表单验证插件|-JavaScript教程

飞码网-免费源码博客分享网站 爱上飞码网—https://www.codefrees.com— 飞码网-matlab-python-C++ 爱上飞码网—https://www.codefrees.com— 飞码网-免费源码博客分享网站

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

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

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

1.jQuery

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

2. jQuery表单验证器

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

 

3. jQuery验证插件

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

 

4.引导验证器

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

 

5.Smoke

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

6. FormValidation

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

表单验证

网站

7. Validatr

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

 

 

8. Validetta

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

 

9. jQuery.validity

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

 

10. h5Validate

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

 

结论

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

飞码网-免费源码博客分享网站 爱上飞码网—https://www.codefrees.com— 飞码网-matlab-python-C++ 爱上飞码网—https://www.codefrees.com— 飞码网-免费源码博客分享网站
赞 ()

相关推荐

内容页底部广告位3
留言与评论(共有 0 条评论)
   
验证码: