推荐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 相关文章推荐
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
Feb 24 Javascript
JS实现的简洁纵向滑动菜单(滑动门)效果
Oct 19 Javascript
jQuery弹层插件jquery.fancybox.js用法实例
Jan 22 Javascript
使用html+js+css 实现页面轮播图效果(实例讲解)
Sep 21 Javascript
关于vue单文件中引用路径的处理方法
Jan 08 Javascript
js中let和var定义变量的区别
Feb 08 Javascript
Vue单页应用引用单独的样式文件的两种方式
Mar 30 Javascript
修改npm全局安装模式的路径方法
May 15 Javascript
Vue+Express实现登录注销功能的实例代码
May 05 Javascript
Vue实现渲染数据后控制滚动条位置(推荐)
Dec 09 Javascript
vue点击按钮实现简单页面的切换
Sep 08 Javascript
vue+vant 上传图片需要注意的地方
Jan 03 Vue.js
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
Zend的AutoLoad机制介绍
2012/09/27 PHP
使用PHP生成二维码的两种方法(带logo图像)
2014/03/14 PHP
Laravel5.7框架安装与使用学习笔记图文详解
2019/04/02 PHP
Thinkphp5.0框架的Db操作实例分析【连接、增删改查、链式操作等】
2019/10/11 PHP
Ext第一周 史上最强学习笔记---GridPanel(基础篇)
2008/12/29 Javascript
善用事件代理,警惕闭包的性能陷阱。
2011/01/20 Javascript
JavaScript EasyPager 分页函数
2011/05/25 Javascript
JS在TextArea光标位置插入文字并实现移动光标到文字末尾
2013/06/21 Javascript
jQuery拖拽div实现思路
2014/02/19 Javascript
使用node.js 获取客户端信息代码分享
2014/11/26 Javascript
jquery实现带缩略图的全屏图片画廊效果实例
2015/06/25 Javascript
轻松搞定jQuery.noConflict()
2016/02/15 Javascript
javascript实现下雪效果【实例代码】
2016/05/03 Javascript
Three.js学习之网格
2016/08/10 Javascript
Node.js实现兼容IE789的文件上传进度条
2016/09/02 Javascript
canvas实现手机端用来上传用户头像的代码
2016/10/20 Javascript
如何实现星星评价(jquery.raty.js插件)
2016/12/21 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
2017/08/28 Javascript
JavaScript设计模式之构造函数模式实例教程
2018/07/02 Javascript
layui 设置table 行的高度方法
2018/08/17 Javascript
微信小程序实现提交input信息到后台的方法示例
2019/01/19 Javascript
微信小程序之 catalog 切换实现解析
2019/09/12 Javascript
nodejs使用Sequelize框架操作数据库的实现
2020/10/21 NodeJs
python查找目录下指定扩展名的文件实例
2015/04/01 Python
Python浅拷贝与深拷贝用法实例
2015/05/09 Python
深入解析Python中的WSGI接口
2015/05/11 Python
Python3.4解释器用法简单示例
2019/03/22 Python
Python列表操作方法详解
2020/02/09 Python
解决windows下python3使用multiprocessing.Pool出现的问题
2020/04/08 Python
python中xlrd模块的使用详解
2021/02/01 Python
奥地利时尚、美容、玩具和家居之家:Kastner & Öhler
2020/04/26 全球购物
宏碁西班牙官网:Acer西班牙
2021/01/08 全球购物
青年教师典范事迹材料
2014/01/31 职场文书
《第一朵杏花》教学反思
2014/04/16 职场文书
个人担保书格式范文
2014/05/12 职场文书
进行数据处理的6个 Python 代码块分享
2022/04/06 Python