文档章节

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

hyjiacan
 hyjiacan
发布于 2016/11/28 09:25
字数 730
阅读 639
收藏 15
点赞 0
评论 0

##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
2009年度最佳jQuery插件

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

晨曦之光
2012/03/09
0
0
jquery常用的插件1000收集

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

Alic
2011/03/07
0
6
67 个节省开发者时间的实用工具、库与资源(前端向)

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

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

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

迷路的阿修罗
2010/12/15
0
0
Web前端开发必备:《Jquery实战》第3版 介绍

目标读者 本书适合想深入学习jQuery的Web开发人员、全栈工程师、架构师。jQuery是互联网上最流行的JavaScript框架。本书的目标是希望读者成为Web高级开发人员,无论起点如何。本书深入介绍了...

frankxulei
06/26
0
0
让人期待的2011年度最佳 jQuery 插件发布啦

  近日,国外著名博客WDL发布了2011年度最佳 jQuery 插件。jQuery 自2006年发布以来,经过五年的迅速发展,目前已是最流行和使用最广泛的 JavaScript 框架。jQuery 的易扩展性吸引了来自全...

Yamazaki
2012/05/02
0
0
2011年12月最新JQuery插件汇总

jQuery的工具提示插件 Tipped jQuery表格插件 colResizable jQuery虚拟键盘插件 jQuery keyboard Minimit Gallery 用于显示相册、幻灯片、卷帘等效果 jQuery 幻灯效果显示插件 Diapo jQuery...

晨曦之光
2012/02/24
0
0
30个创意出色的非常实用的jquery框架插件-(视觉大背景,瀑布流效果)

jQuery是在网页设计师和开发者最近的热门话题之一。人们使用它的广泛范围从个人博客到企业网站,目前流行的视觉大背景滚动效果,瀑布流图片阴影效果,图片缩放,动态标签复制,html5音频播放...

易达
2012/08/04
0
0
介绍几个常用的jquery ui框架

jQuery ui框架很多,除了官方提供的jquery UI(如果你还不知道什么是jQuery UI,请看下载了jquery ui后如何使用),还有很多第三方提供的ui框架,因官方提供的jquery ui框架体积较大,所以很多...

一念三千
2012/10/16
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

about git flow

  昨天元芳做了git分支管理规范的分享,为了拓展大家关于git分支的认知,这里我特意再分享这两个关于git flow的链接,大家可以看一下。 Git 工作流程 Git分支管理策略   git flow本质上是...

qwfys
今天
2
0
Linux系统日志文件

/var/log/messages linux系统总日志 /etc/logrotate.conf 日志切割配置文件 参考https://my.oschina.net/u/2000675/blog/908189 dmesg命令 dmesg’命令显示linux内核的环形缓冲区信息,我们可...

chencheng-linux
今天
1
0
MacOS下给树莓派安装Raspbian系统

下载镜像 前往 树莓派官网 下载镜像。 点击 最新版Raspbian 下载最新版镜像。 下载后请,通过 访达 双击解压,或通过 unzip 命令解压。 检查下载的文件 ls -lh -rw-r--r-- 1 dingdayu s...

dingdayu
今天
1
0
spring boot使用通用mapper(tk.mapper) ,id自增和回显等问题

最近项目使用到tk.mapper设置id自增,数据库是mysql。在使用通用mapper主键生成过程中有一些问题,在总结一下。 1、UUID生成方式-字符串主键 在主键上增加注解 @Id @GeneratedValue...

北岩
今天
2
0
告警系统邮件引擎、运行告警系统

告警系统邮件引擎 cd mail vim mail.py #!/usr/bin/env python#-*- coding: UTF-8 -*-import os,sysreload(sys)sys.setdefaultencoding('utf8')import getoptimport smtplibfr......

Zhouliang6
今天
1
0
Java工具类—随机数

Java中常用的生成随机数有Math.random()方法及java.util.Random类.但他们生成的随机数都是伪随机的. Math.radom()方法 在jdk1.8的Math类中可以看到,Math.random()方法实际上就是调用Random类...

PrivateO2
今天
3
0
关于java内存模型、并发编程的好文

Java并发编程:volatile关键字解析    volatile这个关键字可能很多朋友都听说过,或许也都用过。在Java 5之前,它是一个备受争议的关键字,因为在程序中使用它往往会导致出人意料的结果。在...

DannyCoder
昨天
1
0
dubbo @Reference retries 重试次数 一个坑

在代码一中设置 成retries=0,也就是调用超时不用重试,结果DEBUG的时候总是重试,不是0吗,0就不用重试啊。为什么还是调用了多次呢? 结果在网上看到 这篇文章才明白 https://www.cnblogs....

奋斗的小牛
昨天
2
0
数据结构与算法3

要抓紧喽~~~~~~~放羊的孩纸回来喽 LowArray类和LowArrayApp类 程序将一个普通的Java数组封装在LowArray类中。类中的数组隐藏了起来,它是私有的,所以只有类自己的方法才能访问他。 LowArray...

沉迷于编程的小菜菜
昨天
1
0
spring boot应用测试框架介绍

一、spring boot应用测试存在的问题 官方提供的测试框架spring-boot-test-starter,虽然提供了很多功能(junit、spring test、assertj、hamcrest、mockito、jsonassert、jsonpath),但是在数...

yangjianzhou
昨天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部