Question

基本表单使用

<form id="my-form" action="/test">
  <div class="field-row">
    <label class="field-label">姓名：</label>
    <span data-ui-id="uNameTextBox"><input type="text"></span>
  </div>
  <div class="field-row">
    <label class="field-label">学校：</label>
    <span data-ui-id="schoolTextBox"><input type="text"></span>
  </div>
  <div class="field-row">
    <label class="field-label"><em>*</em>邮箱：</label>
    <span data-ui-id="emailTextBox"><input type="text"></span>
  </div>
  <div class="field-row">
    <label class="field-label">性别：</label>
    <span data-ui-id="sexBoxgroup"></span>
  </div>
  <div class="field-row">
    <label class="field-label">爱好：</label>
    <span data-ui-id="interestBoxgroup"></span>
  </div>  
  <div class="field-row">
    <label class="field-label">省份：</label>
    <span data-ui-id="provSelect"></span>
  </div>  
  <div classs="field-row">
    <label class="field-label">出生日期：</label>
    <span data-ui-id="birthDate"></span>
  </div>  
  <div class="submit-btns">
    <input id="submit-btn" type="submit" value="提交" data-ui-id="submitBtn">
    <input id="save-btn" type="button" value="我也是提交按钮">
  </div>    
</form>
<p id="form-data"></p>
<iframe id="my-frame" name="my-frame" src="about:blank" style="display: none;"></iframe>

require(['moye/Form', 'moye/TextBox', 'moye/Button', 'moye/BoxGroup', 'moye/Select', 'moye/Calendar', 'moye/plugin/FormSubmit'], function(Form) {
  var form = new Form({
    main: document.getElementById('my-form'),
    target: 'my-frame',
    plugins: [
      {
        type: 'FormSubmit',
        options: {
          triggers: ['save-btn']
        }
      }
    ]
  });
  form.context.fill({
    uNameTextBox: {
      type: 'TextBox',
      name: 'userName',
      value: 'jack'
    },
    schoolTextBox: {
      type: 'TextBox',
      name: 'school',
      value: '北京大学',
      disabled: true // 禁用表单项不会被提交
    },
    emailTextBox: {
      type: 'TextBox',
      name: 'email'
    },
    
    sexBoxgroup: {
      skin: 'sex',
      name: 'sex',
      type: 'BoxGroup',
      boxType: 'radio',
      styleClass: 'radio-point',
      datasource: [
        {name: '男', value: 'boy'},
        {name: '女', value: 'girl'}
      ],
      value: ['boy']
    },
    
    interestBoxgroup: {
      skin: 'interest',
      name: 'interest',
      type: 'BoxGroup',
      boxType: 'checkbox',
      styleClass: 'checkbox-tick',
      datasource: [
        {name: '篮球', value: 'basketball'},
        {name: '音乐', value: 'music'},
        {name: '美食', value: 'food'}
      ]
    },
    
    provSelect: {
      type: 'Select',
      name: 'prov',
      skin: 'mini',
      datasource: [
        {name: '北京市', value: 1},
        {name: '天津市', value: 2},
        {name: '广东省', value: 3},
        {name: '浙江省', value: 4},
        {name: '江苏省', value: 5}
      ]
    },
    
    birthDate: {
      type: 'Calendar',
      name: 'birthDate'
    },
    
    submitBtn: {
      type: 'Button'
    }
  });
  form.render();
  form.on('submit', function (e) {
    var tip = document.getElementById('form-data');
    var formData = this.getData();
    tip.innerHTML = '提交表单数据：' + JSON.stringify(formData);
  });
});

注意： 禁用的表单项，不会出现在 getData 接口返回的数据里。为了能获取到对应的表单数据，需要对每个表单控件设置 name 属性。

默认，表单项是没有校验功能，可以使用下面的表单校验插件开启校验，如果还是无法满足你的需求，你也可以强制性重写表单的 validate 方法。

对于 submit 类型的按钮，会自动触发 submit 事件，对于普通的按钮，如果想自动触发 submit 逻辑，可以使用 FormSubmit 插件：

自动提交

// 要求 require `moye/plugin/FormSubmit` 插件
var form = new Form({
  main: document.getElementById('my-form'),
  target: 'my-frame',
  plugins: [ // 启用 FormSubmit 插件
    {
      type: 'FormSubmit',
      options: {
        triggers: ['save-btn'] // 配置要自动触发 `submit` 的按钮 id 或 控件的 id
      }
    }
  ]
});

表单关联域联动

<form id="my-form" action="/test">
  <div class="field-row">
    <label class="field-label"><em>*</em>姓名：</label>
    <span data-ui-id="uNameTextBox"><input type="text"></span>
  </div>
  <div class="field-row">
    <label class="field-label"><em>*</em>邮箱：</label>
    <span data-ui-id="emailTextBox"><input type="text"></span>
  </div>  
  <div class="submit-btns">
    <input id="submit-btn" type="submit" value="提交" data-ui-id="submitBtn">
  </div>    
</form>

require(['moye/Form', 'moye/plugin/FormRelation', 'moye/plugin/FormFieldWatcher', 'moye/TextBox', 'moye/Button'], function (Form, FormRelation) {
  var form = new Form({
    main: document.getElementById('my-form'),
    target: 'my-frame',
    plugins: [
       {
          type: 'FormFieldWatcher',
          options: {
            eventTypes: ['input', 'change']
          }
        },
        {
          type: 'FormRelation',
          options: {
            relations: [
              {
                dependences: [
                  {
                    id: 'uNameTextBox',
                    logic: function () {
                      return !this.getValue();
                    }
                  },
                  {
                    id: 'emailTextBox',
                    logic: function () {
                      return !this.getValue();
                    }
                  }
                ],
                pattern: FormRelation.patterns.any,
                targets: ['submitBtn'],
                actions: [
                  function (result) {
                    result ? this.disable() : this.enable();
                  }
                ]
              }
            ]
          }
        }
    ]
  });
  
  form.context.fill({
    uNameTextBox: {
      type: 'TextBox',
      name: 'userName',
      value: 'jack'
    },
     
    emailTextBox: {
      type: 'TextBox',
      name: 'email'
    },
    
    submitBtn: {
      type: 'Button'
    }
  });
  form.render();
});

经常会有这种需求，比如当某个控件值发生变化时候，某个或某些控件需要发生联动变化，这时候可以使用 FormRelation 插件，为了监控这些表单域变化，需要使用 FormFieldWatcher 插件。

表单域联动

// 要求 require `moye/plugin/FormFieldWatcher` 插件
// 要求 require `moye/plugin/FormRelation` 插件
// 下面这段代码做的事情非常简单：只有姓名和邮箱都不为空的时候，提交按钮才可用
var form = new Form({
  main: document.getElementById('my-form'),
  target: 'my-frame',
  plugins: [
    {
      type: 'FormFieldWatcher',
      options: {
        eventTypes: ['input', 'change'] // 配置要监控的表单域的事件类型
      }
    },
    {
      type: 'FormRelation',
      options: {
        relations: [
          {
            dependences: [
              {
                id: 'uNameTextBox', // 控件 id
                logic: function () { // 要触发联动的逻辑条件定义
                  return !this.getValue();
                }
              },
              {
                id: 'emailTextBox',
                logic: function () {
                  return !this.getValue();
                }
              }
            ],
            // 触发联动效果的依赖表单域需要满足的条件
            // 这里定义条件为只要上面的依赖逻辑条件任何一个为 true 就会触发目标
            // 控件的联动行为
            pattern: FormRelation.patterns.any,
            targets: ['submitBtn'], // 要触发联动的目标控件 id
            actions: [
              function (result) { // 联动行为
                result ? this.disable() : this.enable();
              }
            ]
          }
        ]
      }
    }
  ]
});

表单校验

<form id="my-form" action="/test">
  <div class="field-row">
    <label class="field-label">姓名：</label>
    <span data-ui-id="uNameTextBox"><input type="text"></span>
  </div>
  <div class="field-row">
    <label class="field-label">学校：</label>
    <span data-ui-id="schoolTextBox"><input type="text"></span>
  </div>
  <div class="field-row">
    <label class="field-label"><em>*</em>邮箱：</label>
    <span data-ui-id="emailTextBox"><input type="text"></span>
  </div>   
  <div class="field-row">
    <label class="field-label">省份：</label>
    <span data-ui-id="provSelect"></span>
  </div>     
  <div class="submit-btns">
    <input id="submit-btn" type="submit" value="提交" data-ui-id="submitBtn">
  </div>    
</form>
<p id="form-data"></p>
<iframe id="my-frame" name="my-frame" src="about:blank" style="display: none;"></iframe>

require(['moye/Form', 'moye/plugin/Validator', 'moye/plugin/ValidateTip', 'moye/plugin/validator/email', 'moye/plugin/validator/required', 'moye/plugin/validator/maxlength', 'moye/plugin/validator/minlength', 'moye/TextBox', 'moye/Button', 'moye/Select'], function(Form) {
  var form = new Form({
    main: document.getElementById('my-form'),
    target: 'my-frame'
  });
  
  var validtorTipPlugin = {
    type: 'ValidateTip',
    options: {
      message: {
        skin: 'my-validate-tip',
        arrow: 'bc',
        showDelay: 0,
        hideDelay: 0,
        offset: {
          x: 0,
          y: 2
        }
      },
      icon: {
        content: 'checking',
        skin: 'my-validate-tip-icon',
        arrow: 'rc',
        showDelay: 0,
        hideDelay: 0,
        offset: {
          x: 0,
          y: -5
        }
      }
    }
  };
  form.context.fill({
    uNameTextBox: {
      type: 'TextBox',
      name: 'userName',
      value: 'jack',
      title: '姓名',
      plugins: [
        'Validator',
        validtorTipPlugin
      ],
      rules: [{ type: 'minlength', minLength: 2, message: '!{title}长度不能小于!{minLength}' }, { type: 'maxlength', maxLength: 5 }]
    },
    
    schoolTextBox: {
      type: 'TextBox',
      name: 'school',
      value: '',
      disabled: true, // 禁用的控件不会被校验
      plugins: [
        'Validator',
        'ValidateTip'
      ],
      rules: ['required']
    },
    
    emailTextBox: {
      type: 'TextBox',
      name: 'email',
      title: '邮箱',
      plugins: [
        'Validator',
        'ValidateTip'
      ],
      rules: ['required', 'email']
    },
    
    provSelect: {
      type: 'Select',
      name: 'prov',
      skin: 'mini',
      datasource: [
        {name: '北京市', value: 1},
        {name: '天津市', value: 2},
        {name: '广东省', value: 3},
        {name: '浙江省', value: 4},
        {name: '江苏省', value: 5}
      ]
    },
    
    submitBtn: {
      type: 'Button'
    }
  });
  form.render();
  form.on('submit', function (e) {
    var tip = document.getElementById('form-data');
    var formData = this.getData();
    tip.innerHTML = '提交表单数据：' + JSON.stringify(formData);
  });
});

Moye 预定义的校验规则：

• moye/plugin/validator/email : 邮件校验规则
• moye/plugin/validator/identity : 身份证校验规则
• moye/plugin/validator/max : 最大值校验规则
• moye/plugin/validator/min : 最小值校验规则
• moye/plugin/validator/maxlength : 最大长度校验规则
• moye/plugin/validator/minlength : 最小长度校验规则
• moye/plugin/validator/mobile : 手机号码校验规则
• moye/plugin/validator/natural : 数字验规则
• moye/plugin/validator/required : 不为空校验规则

如果没有想要的校验规则，可以自定义自己的校验规则，具体参考上述校验规则实现。

校验规则

// 为了实现表单自动校验，需要添加表单域的校验规则，需要先 require 如下几个插件：
// `moye/plugin/Validator`
// `moye/plugin/ValidateTip`  如果要添加校验提示，需要这个插件
// `moye/plugin/validator/xx` require 用到的校验规则插件

ctrlId: {
  type: 'TextBox',
  name: 'email',
  value: '',
  title: '邮箱',
  plugins: [
    'Validator',  // 启用校验插件
    'ValidateTip' // 启用校验 tip 插件
  ],
  rules: [ // 定义校验规则
    {
      type: 'minlength',
      minLength: 5,
      message: '!{title}长度不能小于!{minLength}'
    },
    {
      type: 'maxlength',
      maxLength: 100
    },
    'email'
  ]
}