##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长这样就可以了

其中，属性method和action不是必须的，甚至，那个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我是第一次用，模块的合并总觉得有啥不对的；现在还没有对文件上传的处理，这个目前还没有放到计划中。

附录

源码:

示例: