文档章节

TinyForm-0.4.0 基于jQuery的WEB表单工具

hyjiacan
 hyjiacan
发布于 2016/11/28 09:25
字数 730
阅读 645
收藏 15

##TinyForm 做一个用起来简单的表单工具库。

先说说功能吧,这个工具提供了以下几个接口:

  • 通过任意DOM元素创建表单实例(TinyForm)
  • 可以自定义表单控件选择器
  • 获取表单控件
  • 获取(设置)DOM范围内所有(单个)表单控件的数据
  • 使用标签式设置验证规则以及提示消息
  • 获取(设置)DOM范围内所有(单个)表单控件的验证规则并且进行验证
  • 提供验证回调
  • 重置以及异步提交表单
  • 表单数据的本地存储(localStorage/sessionStorage)
  • 自动保存表单数据

下载源码以及编辑

下载源码

代码托管在中华有钱人源码托管网站码云上面:

$git clone https://git.oschina.net/hyjiacan/TinyForm.git

开发环境

看到那个骚浪的文件*.project*了吧,没错,编辑器使用的就是有很多快捷键的HBuilder

初始化node模块,当然,如果这不是必须的。

$cd TinyForm
$npm intstall

构建

做了几年WEB了,这是第一次用这种。。这种。。这种构建工具,短小。。额,小巧的Grunt(感觉 说起来好害羞)。

$grunt

那个小小的TinyForm.min.js就出现在dist目录下了。

用法

HTML长这样就可以了

<div id="form1" method="post" action="XXXX.php">
    <input name="hiahia" value="hyjiacan" data-rule="required" data-msg="求你了,留下点啥吧" />
</div>

其中,属性methodaction不是必须的,甚至,那个id也不是必须的,只要你能搞到这个DOM对象。要注意的是,表单控件必须写上**name*属性。

快看快看,实例化了

var form = TinyForm('#form1');
// 当然也可以这样写
var form = TinyForm($('#form1'));
var form = TinyForm(document.getElementById('form1'));

在实例化的时候,其实还有个option的,这里就不写了,有兴趣可以去看看文档

大爷,来玩啊

// 获取数据
var data = form.getData();

// 获取表单控件
var all = form.getField();

// 设置表单数据
form.setData(data);

// 验证
form.validate();

// 保存数据
form.store();

// 加载数据
form.load();

这些接口都支持添加一个fieldName的参数,用于指定要操作的单个控件。

另外,还提供了扩展接口extend,用于添加自定义的功能,使用方法参见文档。

写在后面的话

TinyForm提供的接口不多,以后会添加,但是也不会添加太多,正常情况下,最多再添加三个了。另外,构建工具Grunt我是第一次用,模块的合并总觉得有啥不对的;现在还没有对文件上传的处理,这个目前还没有放到计划中。

附录

源码:http://git.oschina.net/hyjiacan/TinyForm/tree/0.4.0/

示例: http://hyjiacan.oschina.io/tinyform/

© 著作权归作者所有

共有 人打赏支持
hyjiacan
粉丝 11
博文 2
码字总数 1161
作品 6
成都
程序员
10个顶级的CSS UI开源框架

随着CSS3和HTML5的流行,我们的WEB页面不仅需要更人性化的设计理念,而且需要更酷的页面特效和用户体验。作为开发者,我们需要了解一些宝贵的CSS UI开源框架资源,它们可以帮助我们更快更好地...

k_k_anna
2015/03/12
0
0
jquery常用的插件1000收集

花N长时间积累的Jquery插件,希望大家喜欢。大家还有什么新的插件,请留言,我们一并收录。 感谢大家的支持。 1.accordion类 基于jQuery开发,非常简单的水平方向折叠控件。 Horizontal acc...

Alic
2011/03/07
0
6
2009年度最佳jQuery插件

http://www.it168.com2009年12月14日IT168网站 原创 作者:COMSHARP CMS 编辑:胡铭娅 【IT168 资讯】 jQuery 是个宝库,而 jQuery 的插件体系是个取之不竭的宝库,众多开发者在 jQuery 框架...

晨曦之光
2012/03/09
0
0
67 个节省开发者时间的实用工具、库与资源(前端向)

在这篇文章中,我不会与大家谈论大型的前端框架,如 React、Angular、Vue 等,也没有涉及那些流行的代码编辑器,如 Atom、VS Code、Sublime,我只想与大家分享一个有助于提升开发人员效率的工...

张孝国
06/26
0
0
Web开发者必知的12款jQuery插件

jQuery插件能够增强网站的可用性,有效地改善用户体验,还可以大大减少创建一个新站点的开发时间。现在的jQuery插件很多,尽可以根据您的项目要求来选择,不过也有一些插件很好用,几乎各种项...

迷路的阿修罗
2010/12/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

安全管理标准

安全生产严重等级分类: 故障频次: 风险等级矩阵:

乔老哥
30分钟前
2
0
数据结构“树”的相关微视频

今天在腾讯视频上闲逛,然後发现一个叫“岚人”的用户上传了几段小视频,基本上都在5分钟以内,讲解了关于树的一些结构和算法。零代码,非常适合初学者入门。不过,对于老鸟来说,这也是非常...

Iridium
42分钟前
1
0
10-利用思维导图梳理JavaSE-Java 集合

10-利用思维导图梳理JavaSE-Java 集合 主要内容 1.Collection接口 2.Set接口 2.1.Set接口概述 2.2.HashSet类 2.3.TreeSet类 2.4.SortedSet接口 3.List接口 3.1.List接口概述 3.2.ArrayList类...

飞鱼说编程
53分钟前
4
0
活动推荐|互联网3.0与区块链新时代论坛(北京)

1 时间地点 **时间:**9月22日 14:00 - 18:00 地点:(北京海淀)西大街70号 3w咖啡 二层 2 活动详情 Harmony创始人Stephen及团队将介绍他们的区块链分片扩容技术。Stephen曾任Apple地图服务...

HiBlock
今天
1
0
如何优雅的删除Redis的大key

关于Redis大键(Key),我们从[空间复杂性]和访问它的[时间复杂度]两个方面来定义大键。前者主要表示Redis键的占用内存大小;后者表示Redis集合数据类型(set/hash/list/sorted set)键,所含有的...

IT--小哥
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部