开发者社区> 秋天风景> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

推荐几款很棒的 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 记住啦:)
欢迎任何形式的转载,但请务必注明出处。

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

相关文章
JavaScript 验证串讲| 学习笔记
快速学习 JavaScript 验证串讲。
43 0
通过Canvas + JS 实现简易时钟实战
最近通过各种渠道学习了下html5中的canvas元素,为了练练手就随手写了一个简易的时钟。时钟本身不复杂,没有使用图片进行美化,下面就与大家分享一下具体的代码:     这是最终实现的效果: 部分的启发点来自于 http://developer.
675 0
让 Ghost 不通过加载 js 文件来实现代码高亮
我们添加代码高亮一般都是+css +js来实现的,不过么我们既然是使用 Ghost,基于 Node.js ,我们在后台用 Markdown 书写内容,然后 Ghost 将 markdown 转为 html 代码。如果在 markdown 转为 html 这个过程中调用 prism.js 处理代码片段
3249 0
【转】利用js来实现微信摇一摇来自动更换网页背景的功能
微信推出后,他的摇一摇功能非常的火爆,没事来微信摇一摇加加好友,我们可不可以借鉴一下微信的摇一摇功能,让手机访问网页的时候,只要手机摇一摇,网页背景就会自动随时换一个网页背景。 具体想要用摇一摇的功能思路已经确认的了,现在就是来实现代码的了。我们现在是用javascript来实现摇一摇的功能。js摇一摇的代码如下: http://www.itokit.com/2014/0115/750
1581 0
js实现分页的几个源码,看完基本就懂了
第一种:       addUser.html                       显示有的用户界面                                                                 名称                 ...
738 0
转 用JS实现PHP的sprintf函数
函数如下: function sprintf() {     var arg = arguments,         str = arg[0] || '',         i, n;     for (i = 1, n = arg.length; i < n; i++) {         str = str.replace(/%s/, arg[i]);     }     return str; }   第一个参数是包含的“%s”的字符串,其他参数是对应的用来替换“%s”的变量。
678 0
JS实现HTML静态页传值的方法
JS实现HTML静态页传值的方法 作者:前端开发-武方博 发布:2012-10-29 分类:javascript 阅读:8,735次     此处使用JS方式实现静态页之间值传递,其实很简单,废话不多说,见代码,先看index.
1424 0
怎样把网站js文件合并成一个?几种方法可以实现
  我们在建网站时经常会用js特效代码以使页面更美观,比如js幻灯片代码、js下拉菜单等,但是网页特效一多,如果js文件没有合并的话会降低网站的性能,这时我们就要考虑合并js文件了,ytkah总结了以下几种方法可以实现:   1.
843 0
+关注
秋天风景
既然选择了远方,便只顾风雨兼程。
2393
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载