推荐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 相关文章推荐
JSON 客户端和服务器端的格式转换
Aug 27 Javascript
在多个页面使用同一个HTML片段《续》
Mar 04 Javascript
chrome浏览器不支持onmouseleave事件的解决技巧
May 31 Javascript
使用js画图之饼图
Jan 12 Javascript
原生JS实现圣旨卷轴展开效果
Mar 06 Javascript
JS中正则表达式全局匹配模式 /g用法详解
Apr 01 Javascript
Vue封装Swiper实现图片轮播效果
Feb 06 Javascript
一秒学会微信小程序制作table表格
Feb 14 Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
Oct 21 Javascript
vue data引入本地图片的两种方式小结
Nov 13 Javascript
浅谈vue单页面中有多个echarts图表时的公用代码写法
Jul 19 Javascript
JavaScript中变量提升和函数提升的详解
Aug 07 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
php 邮件发送问题解决
2014/03/22 PHP
PHP临时文件的安全性分析
2014/07/04 PHP
php上传图片并压缩的实现方法
2015/12/22 PHP
YUI 读码日记之 YAHOO.lang.is*
2008/03/22 Javascript
深入理解JavaScript定时机制
2010/10/29 Javascript
用表格输出1-1000之间的数字实现代码(附特效)
2013/04/21 Javascript
JavaScript版TAB选项卡效果实例
2013/08/16 Javascript
jquery实现加载等待效果示例
2013/09/25 Javascript
javascript之Array 数组对象详解
2016/06/07 Javascript
Vue SSR 组件加载问题
2018/05/02 Javascript
Nodejs异步回调之异常处理实例分析
2018/06/22 NodeJs
微信小程序canvas.drawImage完全显示图片问题的解决
2018/11/30 Javascript
详解如何使用router-link对象方式传递参数?
2019/05/02 Javascript
使用js实现一个简单的滚动条过程解析
2019/09/10 Javascript
js实现无缝轮播图
2020/03/09 Javascript
深入讲解Python中面向对象编程的相关知识
2015/05/25 Python
Python的Twisted框架上手前所必须了解的异步编程思想
2016/05/25 Python
Python实现读取SQLServer数据并插入到MongoDB数据库的方法示例
2018/06/09 Python
python重试装饰器的简单实现方法
2019/01/31 Python
Python魔法方法详解
2019/02/13 Python
Python中判断子串存在的性能比较及分析总结
2019/06/23 Python
选择Python写网络爬虫的优势和理由
2019/07/07 Python
Django之路由层的实现
2019/09/09 Python
python队列原理及实现方法示例
2019/11/27 Python
Python解释器及PyCharm工具安装过程
2020/02/26 Python
Python环境搭建过程从安装到Hello World
2021/02/05 Python
Python使用tkinter实现小时钟效果
2021/02/22 Python
我的画教学反思
2014/04/28 职场文书
2014教师研修学习体会
2014/07/08 职场文书
企业党建工作汇报材料
2014/08/19 职场文书
反对形式主义、官僚主义、享乐主义和奢靡之风整改措施
2014/09/17 职场文书
社保缴纳证明申请书
2014/11/03 职场文书
2014年小学教研工作总结
2014/12/06 职场文书
教师文明餐桌光盘行动倡议书
2015/04/28 职场文书
2016新年问候语大全
2015/11/11 职场文书
二年级数学教学反思
2016/02/16 职场文书