推荐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 相关文章推荐
jquery 防止表单重复提交代码
Jan 21 Javascript
点击按钮自动加关注的代码(sina微博/QQ空间/人人网/腾讯微博)
Jan 02 Javascript
常用javascript表单验证汇总
Jul 20 Javascript
JS传值出现中文参数乱码的解决方法
Jun 30 Javascript
AngularJS  $on、$emit和$broadcast的使用
Sep 05 Javascript
JS刷新父窗口的几种方式小结(推荐)
Nov 09 Javascript
AngulerJS学习之按需动态加载文件
Feb 13 Javascript
bootstrap响应式工具使用详解
Nov 29 Javascript
Node.Js中实现端口重用原理详解
May 03 Javascript
使用原生js编写一个简单的框选功能方法
May 13 Javascript
利用不到200行代码写一款属于你自己的js类库
Jul 08 Javascript
如何使用JS console.log()技巧提高工作效率
Oct 14 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
执行、获取远程代码返回:file_get_contents 超时处理的问题详解
2013/06/25 PHP
php的4种常见运行方式
2015/03/20 PHP
功能强大的PHP图片处理类(水印、透明度、旋转)
2015/10/21 PHP
js 效率组装字符串 StringBuffer
2009/12/23 Javascript
使用jquery获取网页中图片高度的两种方法
2013/09/26 Javascript
js控制浏览器全屏示例代码
2014/02/20 Javascript
JavaScript异步加载浅析
2014/12/28 Javascript
简单理解JavaScript中的封装与继承特性
2016/03/19 Javascript
使用jQuery.Pin垂直滚动时固定导航
2017/05/24 jQuery
Vue 中的compile操作方法
2018/02/26 Javascript
Vue项目使用CDN优化首屏加载问题
2018/04/01 Javascript
angular学习之动态创建表单的方法
2018/12/07 Javascript
如何使用less实现随机下雪动画详解
2019/01/02 Javascript
解决layui 三级联动下拉框更新时回显的问题
2019/09/03 Javascript
微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
2019/12/06 Javascript
小程序使用wxs解决wxml保留2位小数问题
2019/12/13 Javascript
基于JQuery实现页面定时弹出广告
2020/05/08 jQuery
ssm+vue前后端分离框架整合实现(附源码)
2020/07/08 Javascript
H5+css3+js搭建带验证码的登录页面
2020/10/11 Javascript
[59:08]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第一局
2016/02/27 DOTA
python基础教程之类class定义使用方法
2014/02/20 Python
Python实现批量更换指定目录下文件扩展名的方法
2016/09/19 Python
用Python一键搭建Http服务器的方法
2018/06/01 Python
对pycharm代码整体左移和右移缩进快捷键的介绍
2018/07/16 Python
python查找指定文件夹下所有文件并按修改时间倒序排列的方法
2018/10/21 Python
Python通过递归获取目录下指定文件代码实例
2019/11/07 Python
python切片作为占位符使用实例讲解
2021/02/17 Python
澳大利亚电子产品购物网站:Dick Smith
2017/02/02 全球购物
什么是servlet链?
2014/07/13 面试题
优秀的2014年两会精神解读
2014/03/17 职场文书
2014年预备党员学习两会心得体会
2014/03/17 职场文书
验房委托书
2014/08/30 职场文书
财务经理岗位职责
2015/01/31 职场文书
react 项目中引入图片的几种方式
2021/06/02 Javascript
Rhit高效可视化Nginx日志查看工具
2021/11/01 Servers
微信告警的zabbix监控系统 监控整个NGINX集群
2022/04/18 Servers