推荐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 相关文章推荐
复选框全选与全不选操作实现思路
Aug 18 Javascript
在Ubuntu系统上安装Node.JS的教程
Oct 15 Javascript
跟我学习javascript的this关键字
May 28 Javascript
如何在Angular.JS中接收并下载PDF
Nov 26 Javascript
flexslider.js实现移动端轮播
Feb 05 Javascript
JavaScript中使用webuploader实现上传视频功能(demo)
Apr 10 Javascript
详解如何在react中搭建d3力导向图
Jan 12 Javascript
Node.js readline 逐行读取、写入文件内容的示例
Mar 01 Javascript
JavaScript模板引擎原理与用法详解
Dec 24 Javascript
微信小程序 腾讯地图SDK 获取当前地址实现解析
Aug 12 Javascript
Vuex中实现数据状态查询与更改
Nov 08 Javascript
jquery实现穿梭框功能
Jan 19 jQuery
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
解决控件遮挡问题:关于有窗口元素和无窗口元素
2007/01/28 PHP
php 安全过滤函数代码
2011/05/07 PHP
php设计模式之单例模式实例分析
2015/02/25 PHP
php实现上传图片文件代码
2015/07/19 PHP
php 常用的系统函数
2017/02/07 PHP
Yii框架创建cronjob定时任务的方法分析
2017/05/23 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
2011/11/15 Javascript
JavaScript电子时钟倒计时
2016/01/09 Javascript
Bootstrap优化站点资源、响应式图片、传送带使用详解3
2016/10/14 Javascript
NodeJS、NPM安装配置步骤(windows版本) 以及环境变量详解
2017/05/13 NodeJs
jQuery实现简单日期格式化功能示例
2017/09/19 jQuery
详解vue-admin和后端(flask)分离结合的例子
2018/02/12 Javascript
解决angular双向绑定无效果,ng-model不能正常显示的问题
2018/10/02 Javascript
Vue使用NPM方式搭建项目
2018/10/25 Javascript
如何使用electron-builder及electron-updater给项目配置自动更新
2018/12/24 Javascript
解决vue动态路由异步加载import组件,加载不到module的问题
2020/07/26 Javascript
python 中文件输入输出及os模块对文件系统的操作方法
2018/08/27 Python
python读取图片任意范围区域
2019/01/23 Python
Python datetime包函数简单介绍
2019/08/28 Python
Python线程协作threading.Condition实现过程解析
2020/03/12 Python
python 如何使用find和find_all爬虫、找文本的实现
2020/10/16 Python
CSS3媒体查询(Media Queries)介绍
2013/09/12 HTML / CSS
css3弹性盒模型(Flexbox)详细介绍
2014/10/08 HTML / CSS
结合CSS3的新特性来总结垂直居中的实现方法
2016/05/30 HTML / CSS
美国钻石商店:Zales
2016/11/20 全球购物
国际性能运动服装品牌:Dare 2b
2018/07/27 全球购物
亿阳信通股份有限公司笔试题(C#)
2016/03/04 面试题
四年级下册教学反思
2014/02/01 职场文书
酒店行政人事部经理职务说明书
2014/02/26 职场文书
工伤死亡理赔协议书
2014/10/20 职场文书
趣味运动会简讯
2015/07/20 职场文书
《家庭教育》读后感3篇
2019/12/18 职场文书
Idea连接MySQL数据库出现中文乱码的问题
2021/04/14 MySQL
请求模块urllib之PYTHON爬虫的基本使用
2022/04/08 Python
微软团队与 NASA 科学家和惠普企业(HPE)的工程师合作
2022/04/21 数码科技