表单一直是类web项目中开发的难点，表单涉及UI,交互，校验，接口，回填等各种坑点，在项目中，我们遵循下列原则设计表单组件

• 配置化表单
• 统一的表单结构
• 丰富的API，简化出错，提示等操作
• 支持任一表单元素之间的联动
• 原生微信所有表单组件支持

示例代码

https://github.com/webkixi/aotoo-xquery 
=> pages/form    

表单组件配置说明

表单由配置文件生成，表单属性构成大致如下图

文本表单使用

以文本类表单展开说明
wxml

<ui-form wx:if="{{formConfig}}" dataSource="{{formConfig}}" /> 

js

const Pager = require('../../components/aotoo/core/index')
const config = [
  {
    title: '文本框表单区域',
    desc: '说明信息',
    input: [
      {
        id: 'aaa', type: 'text', title: '文本', placeholder: '数字输入键盘', 
        error: '错误信息',
        desc: '说明信息'
        bindblur: 'onbindblur',
        bindinput: 'onbindinput',
        bindfocus: 'onbindfocus',
        bindconfirm: 'onbindconfirm',
        bindkeyboardheightchange: 'onbindkeyboardheightchange',
      },
    ]
  },

  {
    title: '数字表单区域',
    input: [
      {id: 'ccc', type: 'number', title: '整数型', placeholder: '数字输入键盘', bindblur: 'onBlur'},
      {id: 'ddd', type: 'idcard', title: '身份证', placeholder: '身份证输入键盘', bindblur: 'onBlur'},
      {id: 'eee', type: 'password', title: '密码串', maxlength: 30, placeholder: '隐藏的密码串', bindblur: 'onBlur'}
    ]
  },

  {
    title: 'TEXTAREA',
    input: [
      {id: 'aaa', type: 'textarea', title: '文本域', placeholder: '输入文字', bindblur: 'onBlur'},
    ]
  },
]

const mthSet = {
  onbindblur(e) {
    console.log('=====text', e.detail.value);
  },
  onbindinput(e) {
    console.log('=====text', e);
  },
  onbindfocus(e) {
    console.log('=====text', e);
  },
  onbindconfirm(e) {
    console.log('=====text', e);
  },
  onbindkeyboardheightchange(e) {
    console.log('=====text', e);
  },
}

Pager({
  data: {
    formConfig: {
      $$id: 'myForm',
      formStyle: 'width: 90vw;',
      data: config,
      methods: mthSet
    },
  }
})

示例如下图所示

更多说明

请移步 https://juejin.im/post/5eba58aaf265da7b9d50d7dd