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!

• Try it on playground.

  

Steps

• npm install wxc-form --save Save wxc-form to your project.
• require it

<template>
  <div>
    <wxc-form id='form' action='/login' method='GET'>
      <input class='input' type="text" name="name" value="name">
      <input class='input' type="email" name="password" value="password">
      <text onclick='submit'>submit</text>
    </wxc-form>
    <text>
      response:
      {{response}}
    </text>
  </div>
</template>
<script>

  // 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.
        })

      }
    }
  };
</script>

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: <input patter="abc">, 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

<template>
  <wxc-form id='form3' action='/action' method='POST'>
    <input type="email" name="email" value="" placeholder="email" required>
    <input type="password" name="password" value="" minlength='6' maxlength="20" required msg='{"minlength": "Password is too short", "required": "oh! you forget your password"}'>
    <text class='btn' id='submit' onclick='submit'>submit</text>
  </wxc-form>
</template>
<script>
  require('wxc-form');
  module.exports = {
    methods: {
      submit: function() {
        var form = this.$vm('form');
        form.toast = function(msg) {
          myDeautifulToast(msg);
        }
        form.submit()
      }
    }
  }
</script>

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
• modules form-json