{"id":21622740,"url":"https://github.com/hyjiacan/tinyform","last_synced_at":"2026-04-29T20:34:57.045Z","repository":{"id":136746836,"uuid":"79883403","full_name":"hyjiacan/TinyForm","owner":"hyjiacan","description":"简单的WEB表单组件 (不好意思，此项目已停止维护)","archived":false,"fork":false,"pushed_at":"2020-04-30T15:03:21.000Z","size":1545,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-20T12:43:09.351Z","etag":null,"topics":["ajax","form","storage","validate"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hyjiacan.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-01-24T05:59:16.000Z","updated_at":"2024-10-19T01:48:03.000Z","dependencies_parsed_at":null,"dependency_job_id":"a312fedd-a214-466a-9572-5e6329e7d573","html_url":"https://github.com/hyjiacan/TinyForm","commit_stats":null,"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"purl":"pkg:github/hyjiacan/TinyForm","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyjiacan%2FTinyForm","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyjiacan%2FTinyForm/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyjiacan%2FTinyForm/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyjiacan%2FTinyForm/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hyjiacan","download_url":"https://codeload.github.com/hyjiacan/TinyForm/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyjiacan%2FTinyForm/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32443564,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-29T20:22:27.477Z","status":"ssl_error","status_checked_at":"2026-04-29T20:22:26.507Z","response_time":110,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ajax","form","storage","validate"],"created_at":"2024-11-25T00:10:02.687Z","updated_at":"2026-04-29T20:34:57.039Z","avatar_url":"https://github.com/hyjiacan.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 简介\r\n\r\n**TinyForm**是一个基于 `jQuery` 的WEB表单处理工具(**仅操作表单，不是~~创建表单~~**)。\r\n使用这个工具，不会改变原有的DOM结构和样式，也不会新增或移除元素。\r\n他根据传入的*选择器*或*DOM/jQuery*对象，创建表单实例，然后在这个范围内搜索带有`name`属性的表单字段。\r\n\u003e默认的选择器是 `input[name]:not(:button,:submit,:reset), select[name], textarea[name]`，\r\n自定义的配置选项为 `TinyForm.defaults.selector`，\r\n也就是说，也可以通过实例化表单的参数 `selector` 来自定义。\r\n需要注意的是：自定义的选择器仅作为默认选择器的附加条件，并不会改变默认的选择器。\r\n\r\n\u003cdel\u003eIE8及更低版本IE浏览器\u003c/del\u003e\r\n\r\n## 目录结构\r\n\r\n**dist** 生成目录\r\n\r\n- tinyform.core[.min].js 基本的表单字段获取和数据读写功能、表单的重置、异步提交\r\n- tinyform.common[.min].js 含以上功能和数据验证功能\r\n- tinyform.all[.min].js 包含所有功能(含以上功能和数据存储)\r\n\r\n**src** 源码目录\r\n\r\n- tinyform.core.js 包含表单实例化，字段获取和刷新缓存以及扩展接口\r\n- tinyform.data.js 包含数据的读写、重置和异步提交\r\n- tinyform.validate.js 验证字段的输入\r\n- tinyform.storage.js 操作数据存储\r\n\r\n## 下载\r\n\r\n\u003e 请使用 **右键-\u003e另存为** 下载文件\r\n\r\n如果只需要表单字段的获取以及表单数据的读写和异步提交，用这个就够了\r\n[tinyform.core.js](http://gitee.com/hyjiacan/TinyForm/raw/master/dist/tinyform.core.js)(开发版)\r\n[tinyform.core.min.js](http://gitee.com/hyjiacan/TinyForm/raw/master/dist/tinyform.core.min.js)(生产版)\r\n\r\n如果还想要用到数据的验证，那就用这个\r\n[tinyform.common.js](http://gitee.com/hyjiacan/TinyForm/raw/master/dist/tinyform.common.js)(开发版)\r\n[tinyform.common.min.js](http://gitee.com/hyjiacan/TinyForm/raw/master/dist/tinyform.core.common.js)(生产版)\r\n\r\n如果还想用到表单数据的本地存储，那就只能选这个了\r\n[tinyform.all.js](http://gitee.com/hyjiacan/TinyForm/raw/master/dist/tinyform.all.js)(开发版)\r\n[tinyform.all.min.js](http://gitee.com/hyjiacan/TinyForm/raw/master/dist/tinyform.all.min.js)(生产版)\r\n\r\n## 源码\r\n\r\ngit\r\n```shell\r\n$ git clone https://gitee.com/hyjiacan/TinyForm.git\r\n```\r\n\r\n## 用法\r\n\r\n用于构建`TinyForm`不是非要`form`元素，其它类型也是可以的。\r\n即使写的不是`form`，`TinyForm`也会读取其属性`method`与`action`。\r\n\r\n\u003e 这样设计是为了防止在`form`中写`button`按钮意外地触发表单的提交事件。\r\n\r\n**html**\r\n\r\n```html\r\n\u003cdiv id=\"f1\" action=\"#\"\u003e\r\n    \u003cdiv\u003e\r\n        \u003clabel for=\"\"\u003e用户名\u003c/label\u003e\r\n        \u003cinput type=\"text\" name=\"username\" data-rule=\"required number\" data-msg=\"有本事你写下你的名字\" placeholder=\"不能为空,只能数字\" /\u003e\r\n    \u003c/div\u003e\r\n    \u003cdiv\u003e\r\n        \u003clabel for=\"\"\u003e性别\u003c/label\u003e\r\n        \u003cinput type=\"radio\" data-rule=\"required\" name=\"gender\" value=\"0\" data-rule=\"required\" data-msg=\"咋，你是人妖？\" /\u003e男的\r\n        \u003cinput type=\"radio\" data-rule=\"required\" name=\"gender\" value=\"1\" /\u003e女的\r\n    \u003c/div\u003e\r\n    \u003cdiv\u003e\r\n        \u003clabel for=\"\"\u003e做啥的\u003c/label\u003e\r\n        \u003cselect name=\"job\" id=\"\"\u003e\r\n            \u003coption value=\"freedom\"\u003e自由职业\u003c/option\u003e\r\n            \u003coption value=\"it\"\u003eIT玩家\u003c/option\u003e\r\n            \u003coption value=\"code\"\u003e码农\u003c/option\u003e\r\n            \u003coption value=\"programmer\"\u003e程序猿\u003c/option\u003e\r\n        \u003c/select\u003e\r\n    \u003c/div\u003e\r\n    \u003cdiv\u003e\r\n        \u003clabel for=\"\"\u003e电话号码\u003c/label\u003e\r\n        \u003cinput type=\"text\" name=\"phone\" value=\"\" data-rule=\"number\" placeholder=\"只能是数字\" /\u003e\r\n    \u003c/div\u003e\r\n    \u003cdiv\u003e\r\n        \u003clabel for=\"\"\u003e英文名字\u003c/label\u003e\r\n        \u003cinput type=\"text\" name=\"name-en\" value=\"\" data-rule=\"alpha lower\" placeholder=\"只能是字母，还只能是小写的\" /\u003e\r\n    \u003c/div\u003e\r\n    \u003cdiv\u003e\r\n        \u003clabel for=\"\"\u003e邮箱\u003c/label\u003e\r\n        \u003cinput type=\"text\" name=\"email\" value=\"\" data-rule=\"email\" placeholder=\"只能输入邮箱\" /\u003e\r\n    \u003c/div\u003e\r\n    \u003cdiv\u003e\r\n        \u003clabel for=\"\"\u003e邮编\u003c/label\u003e\r\n        \u003cinput type=\"text\" name=\"postcode\" value=\"\" data-rule=\"regex:^[0-9]{6}$\" data-msg=\"请输入正确的6位数字\" placeholder=\"只能输入6位数字\" /\u003e\r\n    \u003c/div\u003e\r\n    \u003cdiv\u003e\r\n        \u003clabel for=\"\"\u003e网址\u003c/label\u003e\r\n        \u003cinput type=\"text\" name=\"website\" value=\"\" data-rule=\"site\" placeholder=\"只能输入网址\" /\u003e\r\n    \u003c/div\u003e\r\n    \u003cdiv\u003e\r\n        \u003clabel for=\"\"\u003e签名\u003c/label\u003e\r\n        \u003cinput type=\"text\" name=\"signature\" value=\"\" data-rule=\"length: 12\" placeholder=\"至少要12个字符\" /\u003e\r\n    \u003c/div\u003e\r\n    \u003cdiv\u003e\r\n        \u003clabel for=\"\"\u003e备注\u003c/label\u003e\r\n        \u003ctextarea name=\"remark\" rows=\"5\" cols=\"40\" data-rule=\"length: 20, 32\" placeholder=\"字符数量需要在20-32之间\"\u003e\u003c/textarea\u003e\r\n    \u003c/div\u003e\r\n    \u003cdiv\u003e\r\n        \u003clabel for=\"\"\u003e标签忽略的字段\u003c/label\u003e\r\n        \u003cinput type=\"text\" name=\"ignore-field-1\" data-ignore /\u003e\r\n    \u003c/div\u003e\r\n    \u003cdiv\u003e\r\n        \u003clabel for=\"\"\u003e配置忽略的字段\u003c/label\u003e\r\n        \u003cinput type=\"text\" name=\"ignore-field-2\" /\u003e\r\n    \u003c/div\u003e\r\n\u003c/div\u003e\r\n```\r\n\r\n**js**\r\n\r\n```javascript\r\nvar form = TinyForm('#f1', {\r\n    // 自定义 checkbox 选中(第0个元素)和未选中(第1个元素)状态的值，默认为 ['on', 'off']\r\n    checkbox: [1, 0],\r\n    // 在表单内查找字段时，要忽略的字段或字段集合\r\n    // 值可以为false、字符串或数组：\r\n    // boolean: 仅设置false有效，表示没有需要忽略的\r\n    // array: 要忽略的字段的name组成的数组\r\n    // 要注意的是：这里的优先级比标签上设置的优先级更低\r\n    // 也就是说，即使这里设置的是false，只在要标签上有属性 data-ignore\r\n    ignore: 'ignore-field-2',\r\n    validate: {\r\n        // 用于自定义html标签上写验证规则与提示消息的属性\r\n        attr:{\r\n            // 标签的验证规则属性名称\r\n            rule: 'data-rule',\r\n            // 标签的规则验证失败时的提示消息属性名称\r\n            msg: 'data-msg'  \r\n        },\r\n        // 是否在输入字段失去焦点时自动验证，默认为false\r\n        auto: true,\r\n        // 是否在第一次验证失败时停止验证，默认为true\r\n        stop: false,\r\n        // 每个字段验证后的回调函数\r\n        callback: function(e) {\r\n            //正在验证的字段的jQuery对象\r\n            console.log('字段:' + e.field.attr('name'));\r\n            //此字段的值\r\n            console.log('值:' + e.value);\r\n            //表单验证是否通过\r\n            console.log('结果:' + e.pass);\r\n            // 验证的提示消息，无论验证是否通过都有\r\n            console.log('消息:' + e.msg);\r\n            // 可以通过 return来改变验证的结果，若不想改变原验证结果，可以不返回任何值\r\n        },\r\n        // 这个表单实例附加的验证规则\r\n        rules: {\r\n            // 小写规则\r\n            lower: {\r\n                rule: /^[a-z]+$/,\r\n                msg: '请输入小写字母'\r\n            },\r\n            // 大写规则\r\n            upper: {\r\n                // @param value 字段的值\r\n                // @param name 字段的name属性\r\n                rule: function(value, name){\r\n                    if(value===''){\r\n                        // 输入为空  返回true表示验证通过\r\n                        return true;\r\n                    }\r\n\r\n                    if(/^[A-Z]+$/.test(value)){\r\n                        // 是大写的，返回true表示验证通过\r\n                        return true;\r\n                    }\r\n                    // 验证失败，返回提示消息\r\n                    return '请输入大写字母';\r\n                    // 或者，此时使用data-msg或下面的msg属性\r\n                    // return false;\r\n                },\r\n                msg: '只接收大写字母输入'\r\n            }\r\n            // 当然，还可以加上更多\r\n        }\r\n    },\r\n    storage: {\r\n        // 存储的唯一名称，如果不指定，会使用表单的name值或id值，否则自动计算一个唯一名称\r\n        name: 'xxx',\r\n        // 数据存储的容器，根据应用场景可以设置为 localStorage或sessionStorage\r\n        container: localStorage,\r\n        // 是否在实例化的时候加载存储的数据，默认为false\r\n        load: false,\r\n        // // 自动保存表单数据到存储的间隔(毫秒)，不设置或设置0表示不自动保存\r\n        time: 0,\r\n        // 自动保存数据后的回调函数\r\n        // this 是表单实例\r\n        onstore: function(data) {\r\n            console.log('表单数据已经自动保存');\r\n        }\r\n    },\r\n    // 调用ajax前的数据处理\r\n    beforeSubmit: function(ajaxOption) {\r\n        var data = ajaxOption.data || {};\r\n        data.addition = 'xxxxxxxxxxxxxx';\r\n        if(data.gender) {\r\n            if(data.gender == '0') {\r\n                data.gender = '男的';\r\n            } else {\r\n                data.gender = '女的';\r\n            }\r\n        }\r\n    }\r\n});\r\n```\r\n\r\n自定义`rule`为函数的写法，参见 [issue#4](http://gitee.com/hyjiacan/TinyForm/issues/4)\r\n\r\n想看更多示例 ？ 那就点 **[这里](http://hyjiacan.oschina.io/tinyform/)** 吧\r\n\r\n## 选项\r\n\r\n选项`option`是在创建表单实例的时候传入的一个参数对象：\r\n\r\n```javascript\r\nvar form = TinyForm('formselector', option);\r\n```\r\n\r\n下面是选项的概述：\r\n\r\n`selector` String\r\n\r\n\u003e 自定义的表单字段选择器，用于选择表单字段。注：一定要包含 `[name]`，否则会导致表单功能的异常\r\n\r\n`checkbox` Array\r\n\r\n\u003e 自定义`checkbox`的选中与未选中状态的值，默认为 `['on', 'off']`，\r\n\u003e 这个选项在调用`getData`和`setData`时都会生效，\r\n\u003e 要注意的是，这里的类型只支持基础值类型： `Number, String, Boolean`\r\n\u003e 在设置数据时，会将设置的数据转换成字符串(调用 `toString`，这个选项的值也会转换)再比较，\r\n\u003e 为`on`则选中，否则不选中\r\n\r\n`refresh` Boolean\r\n\r\n\u003e 是否在调用方法时自动调用`refresh`方法，默认为`false`\r\n\r\n`validate` Object\r\n\r\n\u003e 验证相关的参数对象，详细参数详见上方示例\r\n\r\n`storage` Object\r\n\r\n\u003e 存储相关的参数对象，详细参数详见上方示例\r\n\r\n`beforeSubmit` Function(ajaxOption: Object)\r\n\r\n\u003e 异步提交表单前的回调函数，上下文`this`指向 表单实例对象。可以通过此函数改变提交的数据\r\n\u003e `ajaxOption` 异步请求的数据对象，参数与jQuery的ajax参数一致。修改这个对象会直接影响ajax请求的参数。\r\n\u003e `return` 此函数返回 false 会阻止表单的提交(仅阻止通过`form.submit()`发起的提交)。\r\n\r\n`exclude` boolean\r\n  \r\n\u003e 要被排除的范围，在这个范围内的字段不会被加载\r\n\r\n`onprogress` Function() \r\n  \r\n\u003e 表单中有文件字段时的文件上传进度回调函数。\r\n\r\n这些选项的默认值可以通过：\r\n\r\n```javascript\r\n// 设置所有的表单失去焦点时自动验证\r\nTinyForm.defaults.validate.auto = true;\r\n\r\n// 添加一个名为 xxx 的验证规则，在标签上可以通过  data-rule=\"xxx\" 来使用\r\nTinyForm.defaults.validate.rules.xxx = {\r\n    rule: /xxx/,\r\n    msg: '需要xxx'\r\n};\r\n```\r\n\r\n这样的方式来修改，在执行这句后的所有`TinyForm`都会自动在失去焦点后验证\r\n\r\n## 标签属性\r\n\r\n### **data-checkbox**\r\n\r\n此属性用于指示`checkbox`选中和非选中状态时的值，两个值使用`|`符号分隔，如：\r\n`data-checkbox=1|0`或`data-checkbox=选中|未选中`。当设置在表单元素上时，其作用\r\n等同于实例化时的选项`option.checkbox`；当设置在字段上时，仅对设置的字段生效。\r\n\r\n\u003e 注意：此项配置优于编码，即优先级为：字段\u003e表单\u003e选项\r\n\r\n### **data-rule**\r\n\r\n此输入字段的验证规则，支持以下值(**这些写法均要区分大小写**)：\r\n\r\n- `required` 必填\r\n- `number` 数字\r\n- `alpha` 字母\r\n- `email` 电子邮箱\r\n- `site` 网址\r\n- 留空 不验证\r\n- `regex:`打头 自定义的正则表达式，如：`regex: [0-7]`\r\n- `length:`打头 验证输入长度，若只有一个值则表示最短长度;两个值表示长度范围 `length: 6, 16`\r\n\r\n指定多个验证规则时，使用 `|` 符号分隔：\r\n\r\n```html\r\n\u003cinput type=\"text\" name=\"username\" data-rule=\"required|number\" data-msg=\"有本事你写下你的名字|只能是数字\" placeholder=\"不能为空\" /\u003e\r\n```\r\n\r\n需要注意的是，使用 `|` 符号分隔的规则仅在指定规则名称时有效，即不能将规则名称与正则混用，如：\r\n\r\n```html\r\n\u003cinput type=\"text\" name=\"username\" data-rule=\"regex: ^xxx$|number\" data-msg=\"有本事你写下你的名字|只能是数字\" placeholder=\"不能为空\" /\u003e\r\n```\r\n是错误的写法。\r\n\r\n另外，如果想验证输入与其它某个字段的值相同(比如常见的密码确认功能)，可以这样写规则：\r\n\r\n```html\r\n\u003cinput type=\"password\" name=\"pswd\" data-rule=\"required|password\" /\u003e\r\n\u003cinput type=\"password\" name=\"pswdconfirm\" data-rule=\"required|\u0026pswd\" /\u003e\r\n```\r\n\r\n，看到了吧，这里写成引用的方式来告诉程序，希望字段`pswdconfirm`的值与`pswd`的值相同，这样，字段`pswdconfirm`验证时，就会自动判断了。\r\n\r\n### **data-msg**\r\n\r\n\u003e 此字段验证失败时的提示消息，若不指定则使用默认消息，\r\n\u003e data-msg消息的优先级最高，也就是说:\r\n\u003e 如果配置了`data-msg`，那么验证失败始终提示此消息\r\n\u003e 如果没有配置 `data-msg` ，那么就使用 `rule.msg` 作为提示消息\r\n\u003e 如果想要尝试定制提示消息，那层就将`rule.rule`配置为函数，返回值将作为提示消息\r\n\u003e 如果要针对每一个规则设置不同的消息，可以将多个消息使用 `|` 符号分隔，如果消息中包含`|`符号，那么就写成`||`\r\n\r\n当有相同`name`的字段时，只读取第一个字段的*data-rule*和*data-msg*\r\n\r\n可使用如下方法更改提示消息：\r\n\r\n```javascript\r\nvar form = $('#form', {\r\n    validate:{\r\n        required: {\r\n            msg: '请填写必填字段'\r\n        }\r\n    }\r\n})\r\n```\r\n\r\n另外，`data-msg`属性新增了引用功能，可以通过 `\u0026l`, `\u0026p`, `\u0026v`分别引用对应`label`标签和`placeholder`属性的值，如：\r\n\r\n```html\r\n\u003clabel for=\"username\"\u003e用户名\u003c/label\u003e\r\n\u003cinput name=\"username\" data-rule=\"required|format\" data-msg=\"\u0026p|输入的\u0026l格式不正确\" placeholder=\"请输入用户名\" /\u003e\r\n```\r\n\r\n这样，当未填写时，就会提示消息*请输入用户名*，而当输入的格式不正确时(`format`规则)，就会提示*输入的用户名格式不正确*。\r\n\r\n`\u0026l`和`\u0026p`可以多次出现，如果要在消息中显示 `\u0026l`和`\u0026p`，则写作`\u0026\u0026l`和`\u0026\u0026p`。\r\n\r\n### **data-ignore**\r\n\r\n被忽略的字段，有这个属性的字段不会被处理，如：\r\n\r\n```html\r\n\u003cinput type=\"text\" name=\"ignore-field\" data-ignore /\u003e\r\n```\r\n\r\n### **data-exclude**\r\n\r\n被排除的范围，有这个属性范围内的字段不会被处理，如：\r\n\r\n```html\r\n\u003cdiv data-exclude\u003e\r\n    \u003cinput type=\"text\" name=\"ignore-field\" /\u003e\r\n\u003c/div\u003e\r\n```\r\n\r\n\u003e 这些忽略和排除的属性，可以用于在某个表单中创建子表单。\r\n\r\n## 实例属性\r\n\r\n**context**\r\n\r\n\u003e 表单的DOM上下文，这是一个指向实例化表单的DOM的jQuery对象，可以通过这个对象去操作表单表的DOM。\r\n\r\n```javascript\r\n// 查找表单内的按钮\r\nform.context.find('input[type=button]');\r\n```\r\n\r\n**option**\r\n\r\n\u003e 表单的选项，部分参数可以在运行时变更\r\n\r\n```javascript\r\n// 将存储切换为sessionStorage\r\nform.option.storage.container = window.sessionStorage;\r\n```\r\n\r\n可以在运行时变更的选项：\r\n\r\n- `data`\r\n    - `selector` 可以动态地设置字段选择器，重设后需要调用*refresh*方法刷新缓存\r\n- `storage`\r\n    - `container` 切换存储容器\r\n    - `time`  设置为`0`可以停止自动存储数据，停止后不能再次启用自动存储(实例生命周期内)\r\n    - `onstore` 改变自动存储的回调函数\r\n    - `name` 改变存储项的名称，，不推荐修改这项，因为运行时修改可能导致已经存储的数据无法读取\r\n- `validate`\r\n    - `stop` 可以改变：是否在第一次验证失败后停止验证\r\n    - `callback` 改变字段验证的回调函数\r\n\r\n## 实例方法\r\n\r\n\u003e 说明：除了获取数据类(包括验证)的函数，其它都会返回表单的实例对象。\r\n\r\n### tinyform.core\r\n\r\n**getField(fieldName: String): Object**\r\n\r\n根据`name`属性获取字段 返回jQuery对象\r\n\r\n- `fieldName` 要获取的字段的`name`值，如果不指定这个属性，那么返回所有字段\r\n- `return` 范围内所有`name`为指定值的字段的jQuery对象或获取到的所有字段jQuery对象\r\n\r\n**refresh(): Instance**\r\n\r\n重新获取所有字段和验证规则，适用于表单有动态改动时\r\n\r\n- `return` 表单实例\r\n\r\n**getData(fieldName: String): Object**\r\n\r\n获取输入字段的值。\r\n\r\n- `fieldName` 要获取值的字段。字段的`name`名称，如果指定了此参数，则只获取`name=此值`的字段的值\r\n- `return` 表单数据，结构如下：\r\n\r\n```javascript\r\nvar data = {\r\n    username: 'hyjiacan',\r\n    gender: '0'\r\n}\r\n```\r\n\r\n\u003e 注意：没有值时返回空字符串，\r\n\u003e 带有`multiple`属性的`select`，获取到的值为数组，没有选择项时返回空数组。`type=file` 的字段，返回的是文件描述对象 `File` 或 `undefined`。\r\n\r\n**setData(data: Any|Object, fieldName: String|boolean): Instance**\r\n\r\n设置字段的值\r\n\r\n- `data` 表单数据，`field`不指定时结构与`getData`返回结构一致，缺少的项使用空值；指定时可以设置任何合适的类型\r\n- `fieldName` 字段的name名称或是否跳转data中没有的字段，\r\n        如果未指定此参数，则`data`应该是一个对象，此时设置表单所有字段的值\r\n        如果指定了此参数，\r\n        当是字符串时，则只设置name=此值的字段的值;\r\n        当是布尔值时，也会设置所有字段的值，但是会否跳过data中没有的字段(不设置值)\r\n- `return` 表单实例\r\n\r\n**asDefault(data: object): Instance**\r\n\r\n将当前表单内的数据作为默认数据。默认数据将作为 `getChanges` 的比对基础\r\n\r\n- `data` 要作为默认值的数据，如果不传，则使用当前表单内的数据\r\n- `return` 表单实例\r\n\r\n**getChanges(returnField: boolean): object|Boolean**\r\n\r\n获取值的改变的字段\r\n\r\n- `returnField` 是否返回字段，默认为 `false`\r\n        传入`true`的时候，返回的是改变的字段集合\r\n        传入`false`的时候，返回的是改变的值集合\r\n- `return` 有改变时，返回改变的数据，否则返回 `false`\r\n\r\n**reset(): Instance**\r\n\r\n重置表单的值（清空所有数据）\r\n\r\n- `return` 表单实例\r\n\r\n**submit(option: Object): Instance|Promise**\r\n\r\n异步提交表单\r\n\r\n- `option` ajax选项，参数与jQuery的`ajax`选项相同，默认参数如下：\r\n\r\n```javascript\r\nvar option = {\r\n    url: 'String', // 使用表单的action属性\r\n    type: 'String', // 使用表单的method属性，如果没有则使用\"post\"\r\n    data: 'Object' // 使用\"getData()\"取到的表单数据，在此指定时，参数会附加到参数里面\r\n}\r\n```\r\n\r\n\u003e 注意：从版本 `0.7` 开始，这个函数的返回值发生了变化：\r\n\u003e 如果`beforeSubmit`返回`false`，那么此函数不会提交表单，此时此函数会返回`undefined`，\r\n\u003e 而如果提交了表单，那么此函数会返回`ajax`的`Promise`对象，以方便通过`form.submit().then(function(){})`的方式使用返回数据\r\n\r\n### tinyform.common\r\n\r\n**getRule(fieldName: String): Object**\r\n\r\n获取表单指定字段的验证规则或所有规则\r\n\r\n- `fieldName` 件的`name`名称，不指定此值时获取所有规则\r\n- `return` 获取单个字段规则时，返回结构如下：\r\n\r\n```javascript\r\nvar rule = {\r\n    rule:  /^.+$/, // 这里可能是正则或函数\r\n    msg: '不能为空' // 提示消息，通过标签的 *data-msg* 属性设置\r\n}\r\n```\r\n\r\n\u003e 获取多个字段规则时，结构如下：\r\n\r\n```javascript\r\nvar rules = {\r\n    username:{\r\n        rule:  /^.+$/, // 必填\r\n        msg: '不能为空' // 提示消息，通过标签的 *data-msg* 属性设置\r\n    },\r\n    gender: {\r\n        rule:  false, // 没有验证规则\r\n        msg: ''\r\n    }\r\n}\r\n```\r\n\r\n**validate(field: String|Array): Boolean|Object**\r\n\r\n通过标签属性 `data-rule` 指定的规则验证表单\r\n- `fieldName` 指定要验证字段的`name`名称，不指定时验证所有字段\r\n- `return` 验证通过时，返回`true`，未通过时返回失败详细信息，结构如下：\r\n\r\n```javascript\r\nvar result = {\r\n    username: false,\r\n    gender: true\r\n}\r\n```\r\n\r\n### tinyform.all\r\n\r\n**store(fn: Function)**: Object\r\n\r\n存储表单数据\r\n\r\n- `fn` 存储前的数据处理函数，用于在存储前处理数据，这个函数有一个参数`data`，是表单的数据，修改后的数据通过`return`返回\r\n- `return` 表单实例\r\n\r\n**load(fill: Boolean, fn: Function)**: Object\r\n\r\n读取存储的表单数据，读取后会自动加载到表单\r\n\r\n- `fill`是否在读取数据后自动将数据填充到表单中。注意：如果填充，动作发生在回调后\r\n- `fn` 读取后的回调函数，用于在读取后处理数据，这个函数有一个参数`data`，是表单的数据，修改后的数据通过`return`返回\r\n- `return` 从存储读取的数据(没有被回调处理过)\r\n\r\n**abandon()**: Object\r\n\r\n读取存储的表单数据，然后清除存储的数据\r\n\r\n- `return` 从存储读取的数据\r\n\r\n## 静态函数\r\n\r\nTinyForm 也提供了一些的功能函数。\r\n\r\n### 获取实例\r\n\r\n在任意位置获取表单实例的接口。即可以不记住表单实例，只需要通过表单的id就可以获取到指定的表单。\r\n\r\n**TinyForm.get(id)**\r\n\r\n参数`id`是表单的实例id，这个id可以在实例对象的id属性上找到，也可以在创建表单标签的data-tinyform属性上找到。\r\n当指定`id`的实例不存在时，返回 `undefined`，当不传参数`id`时，返回页面上的所有实例\r\n\r\n### 实例功能扩展\r\n\r\nTinyForm 支持通过调用函数`TinyForm.extend`添加自定义实例功能扩展。\r\n\r\n一般的扩展用法如下：\r\n\r\n```javascript\r\n(function($, TinyForm){\r\n    TinyForm.extend({\r\n        setup: function(){\r\n            // 这里写初始化的代码\r\n        },\r\n        refresh:function(){\r\n            // 这里写刷新表单时的代码，对需要缓存的数据进行刷新操作\r\n        },\r\n        method2:function(){\r\n            // 扩展方法 method2\r\n        },\r\n        methodn:function(){\r\n            // 扩展方法 methodn\r\n        }\r\n    });\r\n})(jQuery, TinyForm);\r\n```\r\n\r\n这时候，就可以直接调用\r\n\r\n```javascript\r\nform.method2();\r\nform.methodn();\r\n```\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhyjiacan%2Ftinyform","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhyjiacan%2Ftinyform","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhyjiacan%2Ftinyform/lists"}