{"id":21083158,"url":"https://github.com/zhoukekestar/wxc-form","last_synced_at":"2025-09-13T06:41:30.774Z","repository":{"id":57400517,"uuid":"76239654","full_name":"zhoukekestar/wxc-form","owner":"zhoukekestar","description":"Weex Component Form.","archived":false,"fork":false,"pushed_at":"2017-02-06T09:49:11.000Z","size":453,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-08-22T13:52:21.387Z","etag":null,"topics":["weex","wxc-form"],"latest_commit_sha":null,"homepage":null,"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/zhoukekestar.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-12-12T09:02:58.000Z","updated_at":"2021-11-14T17:27:16.000Z","dependencies_parsed_at":"2022-09-05T00:41:07.077Z","dependency_job_id":null,"html_url":"https://github.com/zhoukekestar/wxc-form","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/zhoukekestar/wxc-form","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhoukekestar%2Fwxc-form","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhoukekestar%2Fwxc-form/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhoukekestar%2Fwxc-form/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhoukekestar%2Fwxc-form/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zhoukekestar","download_url":"https://codeload.github.com/zhoukekestar/wxc-form/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhoukekestar%2Fwxc-form/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274929477,"owners_count":25375710,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-13T02:00:10.085Z","response_time":70,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["weex","wxc-form"],"created_at":"2024-11-19T20:16:38.268Z","updated_at":"2025-09-13T06:41:30.752Z","avatar_url":"https://github.com/zhoukekestar.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# wxc-form\nWeex Component Form.\n\n# Attributes\n* `method` The method you want to use, possible values: `GET`, `POST`, `DELETE`, `PUT`, default: `POST`\n* `action` The url you want to take action.\n* `novalidate` Disable the validator that can validate input value is valid or not.\n\n# Methods\n* `submit(callback, [filter], [progressCallback])`\n\n  Function `callback` will pass a parameter `response`.\n\n  Function `filter` is optional which can modify the body sent to server, if you return `null`, the current request will be canceled.\n\n  Function `progressCallback` is optional.\n\n* `headers()` `function` OR `object`. Function return object will set to current request headers.\n* `toast()` Show message function. Default: `modal.toast(msg)`.\n\n# Quick Start\n\n## Try it 😁\n* [Try it online!](https://zhoukekestar.github.io/wxc-form/public/)\n* Try it on playground.\n\n  ![qr.png](./public/qr.png)\n\n# Steps\n* `npm install wxc-form --save` Save wxc-form to your project.\n* require it\n```html\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cwxc-form id='form' action='/login' method='GET'\u003e\n      \u003cinput class='input' type=\"text\" name=\"name\" value=\"name\"\u003e\n      \u003cinput class='input' type=\"email\" name=\"password\" value=\"password\"\u003e\n      \u003ctext onclick='submit'\u003esubmit\u003c/text\u003e\n    \u003c/wxc-form\u003e\n    \u003ctext\u003e\n      response:\n      {{response}}\n    \u003c/text\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\u003cscript\u003e\n\n  // Require wxc-form component\n  require('wxc-form')\n\n  module.exports = {\n    data: {\n      response: {}\n    },\n    methods: {\n      submit: function() {\n        var that = this\n          , form = this.$vm('form')\n\n        // Custom Headers, function.\n        form.headers = function() {\n          return {\n            'x-client-id': Math.random()\n          }\n        }\n        // form.headers = {'x-client-id': 'id'} // Or an object.\n\n        // Submit\n        form.submit(function(response) {\n\n          // Get response here\n          that.response = JSON.stringify(response, null, 2);\n\n        }, function(data) {\n\n          // Set your new body directly.\n          data['random'] = Math.random();\n\n          return data; // You have to return a new data ojbect,\n          // return null; // This will cancel current request.\n        })\n\n      }\n    }\n  };\n\u003c/script\u003e\n```\n\n# Input Validator\n\n## Form methods\n* `toast` you can override the toast function. Default toast: `modal.toast(msg)`\n\n## Input Attributes\n| Attribute | Message Property | Default Message | Detail |\n| --- | --- | --- | --- |\n| `type=\"email\"` | `email` | 邮箱地址错误 | Check the value is email or not. |\n| `type=\"number\"`| `number` | 数字格式错误 | Check the value is number or not. |\n| `type=\"cellphone tel phone\"` |`cellphone` | 手机号错误 | The type can be one of `cellphone`, `tel`, `phone`. Check the value is phone number or not. |\n| `type=\"integer\"` | `integer` | 请输入整数 | Check the value is integer or not. |\n| `type=\"url\"` | `url` | 请输入正确的网址 | Check the value is url or not. |\n| `type=\"date\"`|`date` | 日期错误 | Check the value is date or not. |\n| `required` |`required` | 必须填写 | Check the value is empty or not. |\n| `pattern` | `pattern` | 请输入正确的值 | Check the value is match current pattern or not. Demo: `\u003cinput patter=\"abc\"\u003e`, you have to input \"abc\" to match it. |\n| `minlength` | `minlength`| 最小长度为{num} | Check the value's length is less than current min-length or not. The `{num}` is your specified value. |\n| `maxlength` |`maxlength` | 最大长度为{num} | Check the value's length is greater than current max-length or not.  The `{num}` is your specified value. |\n| `msg` | \\ | \\ | A JSON Object that can be specify the invalid message. |\n\n## Demo\n```html\n\u003ctemplate\u003e\n  \u003cwxc-form id='form3' action='/action' method='POST'\u003e\n    \u003cinput type=\"email\" name=\"email\" value=\"\" placeholder=\"email\" required\u003e\n    \u003cinput type=\"password\" name=\"password\" value=\"\" minlength='6' maxlength=\"20\" required msg='{\"minlength\": \"Password is too short\", \"required\": \"oh! you forget your password\"}'\u003e\n    \u003ctext class='btn' id='submit' onclick='submit'\u003esubmit\u003c/text\u003e\n  \u003c/wxc-form\u003e\n\u003c/template\u003e\n\u003cscript\u003e\n  require('wxc-form');\n  module.exports = {\n    methods: {\n      submit: function() {\n        var form = this.$vm('form');\n        form.toast = function(msg) {\n          myDeautifulToast(msg);\n        }\n        form.submit()\n      }\n    }\n  }\n\u003c/script\u003e\n```\n# Local Develop\n* `git clone https://github.com/zhoukekestar/wxc-form.git` Clone project.\n* `npm install` Install project dependencies.\n* `npm run serve` run web server, you can go `http://localhost:8080` to see the home page.\n* `npm run dev` Transformer: `xx.we` --\u003e `xx.js`\n\n# Repos\n* This Component Based on `form-json`, `form-validator`\n* [webcomponents form-json](https://github.com/zhoukekestar/webcomponents/tree/master/components/form-json)\n* [modules form-json](https://github.com/zhoukekestar/modules/tree/master/src/formJSON)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzhoukekestar%2Fwxc-form","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzhoukekestar%2Fwxc-form","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzhoukekestar%2Fwxc-form/lists"}