推荐几款很棒的 JavaScript 表单美化和验证插件-阿里云开发者社区

开发者社区> 秋天风景> 正文

推荐几款很棒的 JavaScript 表单美化和验证插件

简介:   表单元素让人爱恨交加。作为网页最重要的组成部分,表单几乎无处不在,从简单的邮件订阅、登陆注册到复杂的需要多页填写的信息提交功能,表单都让开发者花费了大量的时间和精力去处理,以期实现好用又漂亮的表单功能。
+关注继续查看

  表单元素让人爱恨交加。作为网页最重要的组成部分,表单几乎无处不在,从简单的邮件订阅、登陆注册到复杂的需要多页填写的信息提交功能,表单都让开发者花费了大量的时间和精力去处理,以期实现好用又漂亮的表单功能。这篇文章向大家推荐几款很棒的 JavaScript 表单美化和验证插件。

您可能感兴趣的相关文章

 

Ideal Forms

Ideal Forms 则是先进的响应式 HTML5 表单插件,它支持响应式的布局,表单元素界面精美。

主要特色:

  • 完全响应式;
  • 完美键盘操作支持;
  • 可定制的输入标签:select, radio, checkbox 以及 file;
  • 自定义的日期选择器
  • 本地化支持

表单验证的代码示例:

var options = {
  inputs: {
    'username': {
      filters: 'required username exclude',
      data: { exclude: ['user', 'username', 'admin'] }
    },
    'date': { filters: 'date' },
    'comments': {
      filters: 'min max',
      data: { min: 50, max: 200 }
    },
    'colors': {
      filters: 'exclude',
      data: { exclude: ['default'] },
      errors: { exclude: 'Choose a color from the list.' }
    },
    'langs[]': {
      filters: 'min',
      data: { min: 2 },
      errors: { min: 'Check at least <strong>2</strong> languages.' }
    },
    'options': {
      filters: 'min'
      data: { min: 1 },
      errors: { min: 'Check only <strong>1</strong> option.' }
    }
  }
};

var $myform = $('#my-form').idealforms( options ).data('idealforms');

支持的浏览器:IE8+, Webkit, Firefox, Opera, iOS5+, Android 4.0+。

插件下载      在线演示

 

jqTransform

jqTransform 这款表单插件已经出现相当长的一段时间。如果你想快速修改表单皮肤,你应该试试这个。

编写相应的代码,你就可以控制你想应用皮肤的表单元素。和上面的 Ideal Forms 相比,这个插件年代是有点久远了。

调用方法:

$(function() {
    //find all form with class jqtransform and apply the plugin
    $("form.jqtransform").jqTransform();
});

插件下载      在线演示

 

Formly

令人难以置信的简单方法来添加风格和表单验证,Formly 给您的网站表单功能增添精彩。

轻松添加样式,验证,和一个单一的功能以及令人印象深刻的用户交互。可配置多个主题效果。

使用示例:

$(document).ready(function() { 

	$('#ContactInfo').formly({'theme':'Dark'}, function(e) { 
		
		$('.callback').html(e); 

	});
});

插件下载      在线演示

 

jQuery.validationEngine

这款插件的校验提示效果很漂亮,基于 CSS3 实现,可以参考一下。

插件下载      在线演示

 

Niceform

Niceforms 是一个使用自定义设计的风格取代最常用的表单元素的脚本。

您可以使用所提供的默认主题,或以最小的努力开发你自己需要的外观样式。

插件下载      在线演示

  

您可能感兴趣的相关文章

 

本文链接:推荐几款好用的 JavaScript 表单美化和验证插件

编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

作者:山边小溪
主站:yyyweb.com 记住啦:)
欢迎任何形式的转载,但请务必注明出处。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
10076 0
Fundebug前端JavaScript插件更新至1.7.1,拆分录屏代码,还原部分Script error.
摘要: BUG监控插件压缩至18K。 1.7.0拆分了录屏代码,BUG监控插件压缩至18K,另外我们还原了部分Script error,帮助用户更方便地Debug。请大家及时更新哈~ 拆分录屏代码 从1.7.0版本开始,我们拆分了录屏代码。
1349 0
Fundebug:JavaScript插件支持错误采样
Fundebug的付费套餐主要是根据错误事件数制定的,这是因为每一个发送到我们服务器的事件,都会消耗一定的CPU、内存、磁盘以及带宽资源,尤其当错误事件数非常大时,会对我们的计算资源造成很大压力。 如果您希望采样收集错误,比如“只收集30%的错误”,可以将sampleRate属性设为0.3。
502 0
10 个超赞的 JavaScript 图形图表绘制插件
1、Humble Finance Humble Finance是一个与Flash工具相似的HMTL5数据可视化工具。该工具完全由JavaScript开发,使用Prototype与Flotr库 2、D3 D3是最流行的可视化库之一,它被很多其他的表格插件所使用。
767 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13884 0
超全超实用的Javascript类库和jQuery插件大全之一:Web印刷排版
日期:2012-10-9  来源:GBin1.com 如果你需要解决一些开发中遇到的技术问题的话,很可能会找到一些相关的javascript类库或者是jQuery插件来实现。这样实用的类库或者jQuery插件往往是你应该时常收集并且保存的,特别是如果你不希望自己去处理不同浏览器的兼容性问题的话,使用现成的javascript类库或者是jQuery插件往往能够帮助你提高开发效率。
1181 0
超全超实用的Javascript类库和jQuery插件大全之一:图片,地图和图形
日期:2012-10-10  来源:GBin1.com 如果你需要解决一些开发中遇到的技术问题的话,很可能会找到一些相关的javascript类库或者是jQuery插件来实现。这样实用的类库或者jQuery插件往往是你应该时常收集并且保存的,特别是如果你不希望自己去处理不同浏览器的兼容性问题的话,使用现成的javascript类库或者是jQuery插件往往能够帮助你提高开发效率。
1317 0
+关注
秋天风景
既然选择了远方,便只顾风雨兼程。
2394
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载