Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zhoukekestar/wxc-form
Weex Component Form.
https://github.com/zhoukekestar/wxc-form
weex wxc-form
Last synced: about 5 hours ago
JSON representation
Weex Component Form.
- Host: GitHub
- URL: https://github.com/zhoukekestar/wxc-form
- Owner: zhoukekestar
- License: mit
- Created: 2016-12-12T09:02:58.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2017-02-06T09:49:11.000Z (almost 8 years ago)
- Last Synced: 2024-10-31T17:20:17.365Z (19 days ago)
- Topics: weex, wxc-form
- Language: JavaScript
- Size: 442 KB
- Stars: 3
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# wxc-form
Weex Component Form.
# Attributes
* `method` The method you want to use, possible values: `GET`, `POST`, `DELETE`, `PUT`, default: `POST`
* `action` The url you want to take action.
* `novalidate` Disable the validator that can validate input value is valid or not.
# Methods
* `submit(callback, [filter], [progressCallback])`
Function `callback` will pass a parameter `response`.
Function `filter` is optional which can modify the body sent to server, if you return `null`, the current request will be canceled.
Function `progressCallback` is optional.
* `headers()` `function` OR `object`. Function return object will set to current request headers.
* `toast()` Show message function. Default: `modal.toast(msg)`.
# Quick Start
## Try it 😁
* [Try it online!](https://zhoukekestar.github.io/wxc-form/public/)
* Try it on playground.
# Steps
* `npm install wxc-form --save` Save wxc-form to your project.
* require it
```html
submit
response:
{{response}}
// Require wxc-form component
require('wxc-form')
module.exports = {
data: {
response: {}
},
methods: {
submit: function() {
var that = this
, form = this.$vm('form')
// Custom Headers, function.
form.headers = function() {
return {
'x-client-id': Math.random()
}
}
// form.headers = {'x-client-id': 'id'} // Or an object.
// Submit
form.submit(function(response) {
// Get response here
that.response = JSON.stringify(response, null, 2);
}, function(data) {
// Set your new body directly.
data['random'] = Math.random();
return data; // You have to return a new data ojbect,
// return null; // This will cancel current request.
})
}
}
};
```
# Input Validator
## Form methods
* `toast` you can override the toast function. Default toast: `modal.toast(msg)`
## Input Attributes
| Attribute | Message Property | Default Message | Detail |
| --- | --- | --- | --- |
| `type="email"` | `email` | 邮箱地址错误 | Check the value is email or not. |
| `type="number"`| `number` | 数字格式错误 | Check the value is number or not. |
| `type="cellphone tel phone"` |`cellphone` | 手机号错误 | The type can be one of `cellphone`, `tel`, `phone`. Check the value is phone number or not. |
| `type="integer"` | `integer` | 请输入整数 | Check the value is integer or not. |
| `type="url"` | `url` | 请输入正确的网址 | Check the value is url or not. |
| `type="date"`|`date` | 日期错误 | Check the value is date or not. |
| `required` |`required` | 必须填写 | Check the value is empty or not. |
| `pattern` | `pattern` | 请输入正确的值 | Check the value is match current pattern or not. Demo: ``, you have to input "abc" to match it. |
| `minlength` | `minlength`| 最小长度为{num} | Check the value's length is less than current min-length or not. The `{num}` is your specified value. |
| `maxlength` |`maxlength` | 最大长度为{num} | Check the value's length is greater than current max-length or not. The `{num}` is your specified value. |
| `msg` | \ | \ | A JSON Object that can be specify the invalid message. |
## Demo
```html
submit
require('wxc-form');
module.exports = {
methods: {
submit: function() {
var form = this.$vm('form');
form.toast = function(msg) {
myDeautifulToast(msg);
}
form.submit()
}
}
}
```
# Local Develop
* `git clone https://github.com/zhoukekestar/wxc-form.git` Clone project.
* `npm install` Install project dependencies.
* `npm run serve` run web server, you can go `http://localhost:8080` to see the home page.
* `npm run dev` Transformer: `xx.we` --> `xx.js`
# Repos
* This Component Based on `form-json`, `form-validator`
* [webcomponents form-json](https://github.com/zhoukekestar/webcomponents/tree/master/components/form-json)
* [modules form-json](https://github.com/zhoukekestar/modules/tree/master/src/formJSON)