TinyForm-0.4.0 基于jQuery的WEB表单工具
博客专区 > hyjiacan 的博客 > 博客详情
TinyForm-0.4.0 基于jQuery的WEB表单工具
hyjiacan 发表于1年前
TinyForm-0.4.0 基于jQuery的WEB表单工具
  • 发表于 1年前
  • 阅读 634
  • 收藏 15
  • 点赞 0
  • 评论 0

【腾讯云】新注册用户域名抢购1元起>>>   

摘要: 在做系统的时候,遇到很多表单的操作,然而没有找到现成的用起来简单的解决方案,于是自己写了一个。当然,或许这仅仅是对我来说用起来简单。

##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/

标签: Form
  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 11
博文 2
码字总数 1161
作品 6
×
hyjiacan
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: