文档章节

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

hyjiacan
 hyjiacan
发布于 2016/11/28 09:25
字数 730
阅读 649
收藏 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
成都
程序员
私信 提问
TinyForm 0.7.4 发布,一个简单的WEB表单工具

TinyForm是一个基于 jQuery 的WEB表单处理工具(仅操作表单,不是创建表单)。他根据传入的选择器或DOM/jQuery对象,创建表单实例,然后在这个范围内搜索带有name属性的表单控件。 1 规范验证失...

hyjiacan
2017/03/12
1K
4
TinyForm 0.5.0 发布,一个简单的WEB表单工具

TinyForm 0.5.0 发布了。TinyForm 是一个基于jQuery的表单工具。旨在用最简单的方式操作表单。 更新: 给每一行代码都编写了注释 生成多个目标文件,以适应需求,最小文件仅4K 优化配置参数...

hyjiacan
2016/12/08
953
0
TinyForm 0.6.0 发布,简单的 WEB 表单工具

TinyForm 是一个基于jQuery的WEB表单处理工具。他根据传入的选择器或DOM/jQuery对象,创建表单实例,然后在这个范围内搜索带有name属性的表单控件。 更新: 优化表单控件的 selector 优化 re...

hyjiacan
2017/01/12
2.1K
3
TinyForm 0.70 发布,一个简单的 WEB 表单工具

TinyForm是一个基于 jQuery 的WEB表单处理工具(仅操作表单,不是创建表单)。他根据传入的选择器或DOM/jQuery对象,创建表单实例,然后在这个范围内搜索带有name属性的表单控件。 本次更新全是...

hyjiacan
2017/03/07
854
2
TinyForm 发布 0.4.5,基于 jQuery 的表单工具

TinyForm 是一个基于jQuery的表单工具。旨在用最简单的方式操作表单。 更新: 更新 README.md和示例文件 添加 示例less开发时的自动编译 优化 将相同name属性的控件添加到jQuery集合中,优化...

hyjiacan
2016/12/06
2.6K
4

没有更多内容

加载失败,请刷新页面

加载更多

微服务分布式事务实现

https://www.processon.com/view/link/5b2144d7e4b001a14d3d2d30

WALK_MAN
16分钟前
0
0
《大漠烟尘》读书笔记及读后感文章3700字

《大漠烟尘》读书笔记及读后感文章3700字: 在这个浮躁的社会里,你有多久没有好好读完一本书了? 我们总觉得自己和别人不一样,所以当看到别人身上的问题时,很少有“反求诸己”,反思自己。...

原创小博客
51分钟前
1
0
大数据教程(9.5)用MR实现sql中的jion逻辑

上一篇博客讲解了使用jar -jar的方式来运行提交MR程序,以及通过修改YarnRunner的源码来实现MR的windows开发环境提交到集群的方式。本篇博主将分享sql中常见的join操作。 一、需求 订单数据表...

em_aaron
59分钟前
1
0
十万个为什么之什么是resultful规范

起源 越来越多的人开始意识到,网站即软件,而且是一种新型的软件。这种"互联网软件"采用客户端/服务器模式,建立在分布式体系上,通过互联网通信,具有高延时(high latency)、高并发等特点...

尾生
今天
1
0
Terraform配置文件(Terraform configuration)

Terraform配置文件 翻译自Terraform Configuration Terraform用文本文件来描述设备、设置变量。这些文件被称为Terraform配置文件,以.tf结尾。这一部分将讲述Terraform配置文件的加载与格式。...

buddie
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部