##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>
其中,属性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我是第一次用,模块的合并总觉得有啥不对的;现在还没有对文件上传的处理,这个目前还没有放到计划中。