推荐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 相关文章推荐
checkbox 复选框不能为空
Jul 11 Javascript
IE bug table元素的innerHTML
Jan 11 Javascript
用js的for循环获取radio选中的值
Oct 21 Javascript
JS简单实现登陆验证附效果图
Nov 19 Javascript
使用JavaScript实现网页版Pongo设计思路及源代码分享
Jun 16 Javascript
node.js中的querystring.stringify方法使用说明
Dec 10 Javascript
js根据鼠标移动速度背景图片自动旋转的方法
Feb 28 Javascript
用户代理字符串userAgent可实现的四个识别
Sep 20 Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
Oct 09 Javascript
前端把html表格生成为excel表格的实例
Sep 19 Javascript
Vue+Element实现动态生成新表单并添加验证功能
May 23 Javascript
详解JavaScript中的执行上下文及调用堆栈
Apr 29 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
第四节 构造函数和析构函数 [4]
2006/10/09 PHP
PHP 函数call_user_func和call_user_func_array用法详解
2014/03/02 PHP
PHP数据分析引擎计算余弦相似度算法示例
2017/08/08 PHP
jquery获取iframe中的dom对象(两种方法)
2013/07/02 Javascript
JS中的this变量的使用介绍
2013/10/21 Javascript
JS 如何获取radio选中后的值及不选择取radio的值
2013/10/28 Javascript
利用javascript打开模态对话框(示例代码)
2014/01/11 Javascript
ES6教程之for循环和Map,Set用法分析
2017/04/10 Javascript
微信小程序功能之全屏滚动效果的实现代码
2018/11/22 Javascript
解决node终端下运行js文件不支持ES6语法
2020/04/04 Javascript
通过实例了解Render Props回调地狱解决方案
2020/11/04 Javascript
[01:51]DAC趣味视频-如何成为职业选手.mp4
2017/04/02 DOTA
在Python的while循环中使用else以及循环嵌套的用法
2015/10/14 Python
python dict.get()和dict['key']的区别详解
2016/06/30 Python
5分钟 Pipenv 上手指南
2018/12/20 Python
Python设计模式之原型模式实例详解
2019/01/18 Python
Python查找数组中数值和下标相等的元素示例【二分查找】
2019/02/13 Python
Python绘制频率分布直方图的示例
2019/07/08 Python
python如何支持并发方法详解
2020/07/25 Python
python 多线程死锁问题的解决方案
2020/08/25 Python
Django配置Bootstrap, js实现过程详解
2020/10/13 Python
Python通过len函数返回对象长度
2020/10/22 Python
香港家用健身器材、运动器材及健康美容仪器专门店:FitBoxx
2019/12/05 全球购物
Deux par Deux官方网站:设计师童装
2020/01/03 全球购物
用友笔试题目
2016/10/25 面试题
物理系毕业生自荐信
2013/11/01 职场文书
高职教师岗位职责
2013/12/24 职场文书
高二地理教学反思
2014/01/24 职场文书
班级活动策划书
2014/02/06 职场文书
优秀乡村医生事迹材料
2014/05/28 职场文书
鲁滨逊漂流记读书笔记
2015/06/26 职场文书
《莫泊桑拜师》教学反思
2016/02/22 职场文书
导游词之崇武古城
2019/10/07 职场文书
Go语言特点及基本数据类型使用详解
2022/03/21 Golang
mysql 子查询的使用
2022/04/28 MySQL
使用Redis实现分布式锁的方法
2022/06/16 Redis