推荐10款扩展Web表单的JS插件


Posted in Javascript onDecember 25, 2017

在网站建设中,你可以使用java开发大量酷炫的特效放到你网站上,但我们知道,互联网上也有很多开源的js库和插件可供选择。如果你正在设计用户注册/登录,访客留言或活动报名等自定义表单,那么下面这些插件,可以让你的表单获得更好的用户体验。

JCF Forms

推荐10款扩展Web表单的JS插件

我最喜欢的一款js表单插件是 PSD2HTML 上的 JCF Forms。其名称 JCF 是 Java Custom Forms 的缩写,意思是“Java 自定义表单”。

使用这款插件,你可以自定义下拉列表、范围滑块、单选/复选按钮、上传组件等大部分Web表单控件的样式。它是完全免费的,基于JQuery编写,配置起来非常方便。

iCheck

推荐10款扩展Web表单的JS插件

iCheck 是一款用于美化单选框和复选框的插件,这款插件是基于 Bootstrap 开发的,调用代码非常简洁,几乎不需要太多的js知识即可使用。插件本身配有少量的预设主题,你可以直接拿来用,也可以自己设计新的主题。

除了外观,此插件还支持键盘输入, 32 个自定义选项和十几个回调方法用来处理用户行为。

Parsley.js

推荐10款扩展Web表单的JS插件

如果你喜欢 Vanilla JS,那么你一定也会喜欢 Parsley,一种免费的基于JS的表单验证库。Parsley 是独一无二的,因为它不需要复杂的正则表达式来使其工作。它提供内置的验证器,用于所有类型的输入验证,如电话号码、电子邮件、地址或信用卡号等。

FloatLabel.js

推荐10款扩展Web表单的JS插件

FloatLabel 用于实现 Web 表单输入框的浮动提示,它有点类似于 H5 的 placeholder 属性(提供可描述输入字段预期值的提示信息),但不同的是,FloatLabel 插件实现的提示,当你开始在文本框中录入文字时,提示并不会消失,而是显示在文字上方,这非常人性化。

Tooltipster

推荐10款扩展Web表单的JS插件

在相对复杂的表单中使用 Tooltipster 做提示工具是非常不错的选择,Tooltipster 是一款免费的 JQuery 插件,可以让您在屏幕的任何位置添加提示信息。 

您可以根据实际的用户行为自定义提示特效,如悬停、点击、焦点触发等。您还可以自定义他们的样式和动画效果,并且支持 Ajax 请求回调方法。

Fort.js

推荐10款扩展Web表单的JS插件

你可能发现了,有些网站会在屏幕顶部显示进度条,用于提示表单填写的完成程度。这对于用户想知道还需要多久才能填写完冗长的表单是非常有帮助的。

使用 Fort.js,您只需要输入几行代码就可以在网站上实现表单填写进度条效果了。此插件也是完全免费的,也不限制表单中的字段数量。

jQuery CC Validator

推荐10款扩展Web表单的JS插件

在网站中,数据安全是一个永恒的主题,特别是在电子商务网站中,经常会用到让用户输入信用卡信息的功能,我相信 jQuery CC Validator 是迄今为止解决这一应用场景的最好用的插件。

它完全免费、开源,运行在 JQuery 库之上,让开发者使用起来非常方便,这是一款令人难以置信的插件。

BS3 Datepicker

推荐10款扩展Web表单的JS插件

BS3 Datepicker 是一款用于定制 Web 表单中日期控件的插件,基于 Bootstrap 框架编写,完全围绕 Bootstrap 的设计风格,界面简洁清晰,让人一目了然。实际上,你可以在 Bootstrap 中找到很多令人敬畏的插件。

jQuery File Uploads

推荐10款扩展Web表单的JS插件

不可否认,处理用户上传文件是一项非常复杂的表单任务,特别是,当您需要创建一个适用于所有设备的上传控件,还能定义特定类型的文件,且知道如何在后端处理它们的时候,工作就变得更为复杂。

这款 JQuery 文件上传插件,可以作为一个很好的解决方案应用在网站中,它为你解决了大部分上传文件时,可能遇到的问题或需要的配置。

jQuery Autotab

推荐10款扩展Web表单的JS插件

Matthew Miller 的 jQuery Autotab 插件,允许您为任何表单输入定义一定长度,以便在完成后自动选择下一个表单,它最适合于需要一定数量字符(如电话号码或生日)的字段

Javascript 相关文章推荐
prototype 中文参数乱码解决方案
Nov 09 Javascript
javascrip客户端验证文件大小及文件类型并重置上传
Jan 12 Javascript
Extjs gridpanel 出现横向滚动条问题的解决方法
Jul 04 Javascript
JS弹出窗口代码大全(详细整理)
Dec 21 Javascript
indexedDB bootstrap angularjs之 MVC DOMO (应用示例)
Jun 20 Javascript
AngularJS入门教程之迭代器过滤详解
Aug 18 Javascript
jquery datatable服务端分页
Aug 31 Javascript
完美解决jQuery fancybox ie 无法显示关闭按钮的问题
Nov 29 Javascript
Web前端框架Angular4.0.0 正式版发布
Mar 28 Javascript
Vue.js实现tab切换效果
Jul 24 Javascript
JavaScript实现点击出现子菜单效果
Feb 08 Javascript
原生微信小程序开发中 redux 的使用详解
Feb 18 Javascript
jQuery实现右侧抽屉式在线客服功能
Dec 25 #jQuery
用React-Native+Mobx做一个迷你水果商城APP(附源码)
Dec 25 #Javascript
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 #jQuery
Webpack优化配置缩小文件搜索范围
Dec 25 #Javascript
详解Webpack实战之构建 Electron 应用
Dec 25 #Javascript
Angular4实现图片上传预览路径不安全的问题解决
Dec 25 #Javascript
JS实现十字坐标跟随鼠标效果
Dec 25 #Javascript
You might like
虫族 Zerg 魔法科技
2020/03/14 星际争霸
php设置允许大文件上传示例代码
2014/03/10 PHP
php+mysqli实现批量替换数据库表前缀的方法
2014/12/29 PHP
php判断是否为ajax请求的方法
2016/11/29 PHP
JAVASCRIPT keycode总结
2009/02/04 Javascript
Extjs gridpanel 出现横向滚动条问题的解决方法
2011/07/04 Javascript
jQuery 1.8 Release版本发布了
2012/08/14 Javascript
单击按钮显示隐藏子菜单经典案例
2013/01/04 Javascript
jQuery动画效果animate和scrollTop结合使用实例
2014/04/02 Javascript
动态载入js提高网页打开速度的方法
2014/07/04 Javascript
2014年50个程序员最适用的免费JQuery插件
2014/12/15 Javascript
JS+Canvas 实现下雨下雪效果
2016/05/18 Javascript
浅谈Javascript中的12种DOM节点类型
2016/08/19 Javascript
手动初始化Angular的模块与控制器
2016/12/26 Javascript
JavaScript刷新页面的几种方法总结
2019/03/28 Javascript
微信公众号获取用户地理位置并列出附近的门店的示例代码
2019/07/25 Javascript
vue简单练习 桌面时钟的实现代码实例
2019/09/19 Javascript
python对配置文件.ini进行增删改查操作的方法示例
2017/07/28 Python
使用python编写监听端
2018/04/12 Python
PyTorch搭建一维线性回归模型(二)
2019/05/22 Python
Python openpyxl模块原理及用法解析
2020/01/19 Python
在jupyter notebook 添加 conda 环境的操作详解
2020/04/10 Python
python matplotlib:plt.scatter() 大小和颜色参数详解
2020/04/14 Python
Python内置函数property()如何使用
2020/09/01 Python
Timberland美国官网:全球领先的户外品牌
2016/08/15 全球购物
Mio Skincare美国官网:身体紧致及孕期身体护理
2017/03/05 全球购物
Perfume’s Club德国官网:在线购买香水
2019/04/08 全球购物
土木工程专业大学毕业生求职信
2013/10/13 职场文书
实习生岗位职责
2014/04/12 职场文书
解放思想演讲稿
2014/09/11 职场文书
基层工作经验证明样本
2014/11/16 职场文书
2014年销售助理工作总结
2014/12/01 职场文书
音乐教师个人工作总结
2015/02/06 职场文书
2019各种保证书范文
2019/06/24 职场文书
vue首次渲染全过程
2021/04/21 Vue.js
如何理解PHP核心特性命名空间
2021/05/28 PHP