React ui docs

React UI Form

单独封装的一个react-ui的表单，提供快速的表单开发。
实现了react-ui的表单全部功能，包含自动提示信息，自动表单校验。
使用比较简单，不需要写jsx代码，不需要babel转码，不需要webpack打包。
直接在页面加载React和Form的js文件，然后调用Form的render方法就好。

  <script src="//cdn.bootcss.com/react/0.14.7/react.js"></script>
  <script src="//cdn.bootcss.com/react/0.14.7/react-dom.js"></script>
  <script src="js/Form.js"></script>
  <script>
  Form.render({
    button: '提交'    // button文字
    data: object,     // form初始数据
    controls: array,  // 组件配置
    onSubmit: function (data) {
      // 处理数据提交，只有validate通过才会触发submit事件
    }
  });
  </script>

Example

鼠标移动到控件上会显示此control的配置，可以尝试修改后运行，try it。

显示代码 controls 参数见这里 items 参数见这里

  var controls = [
    { type: 'text', label: 'text', name: 'text', required: true, min: 3, max: 12, grid: 1 },
    { type: 'email', label: 'email', name: 'email', grid: 1 },
    { type: 'text', label: 'readonly', name: 'readonly', readOnly: true },
    { type: 'datetime', label: 'datetime', name: 'datetime', required: true, tip: '自定义tip文字' },
    { type: 'tree', label: 'tree', name: 'tree', fetch: { url: 'json/tree.json' }, selectAble: true },
    { label: 'two items', 
      items: [
        { type: 'date', name: 'startTime', min: '2016-03-20' }, 
        '-',
        { type: 'date', name: 'endTime' }
      ]
    },
    { type: 'password', label: 'password', name: 'password', required: true, grid: 1, min: 6, max: 18 },
    { type: 'password', label: 'repeat password', name: 'repeatpassword', grid: 1, tip: '重复密码', ignore: true,
      validator: {
        func: function (value, data) {
          var password = data.password;
          if (!value ? !password : value === password) {
            return true;
          } else {
            return new Error('两次输入密码不一致');
          }
        },
        bind: ['password']
      }
    },
    { type: 'select', label: 'select', name: 'select', grid: 1/3,
      data: { shanghai: '上海', beijing: '北京', hangzhou: '杭州', guangzhou: '广州', shenzhen: '深圳' } },
    { type: 'checkbox-group', label: 'checkbox-group', name: 'checkbox-group', min: 2,
      data: { shanghai: '上海', beijing: '北京', hangzhou: '杭州', guangzhou: '广州', shenzhen: '深圳' } },
    { type: 'radio-group', label: 'radio-group', name: 'radio-group',
      data: { shanghai: '上海', beijing: '北京', hangzhou: '杭州', guangzhou: '广州', shenzhen: '深圳' } },
    { type: 'textarea', label: 'textarea', autoHeight: true }
  ];

  var formData = {
    datetime: '2016-01-02',
    select: 'beijing',
    readonly: 'can\'t edit'
  };

  Form.render('form', {
    button: '确定',
    autoComplete: false,
    data: formData,
    controls: controls,
    onSubmit: function (data) {
      formData = data;
      Form.alert(JSON.stringify(data, null, 2));
    }
  });