LuLu UI组件中文文档 » 表单解决方案

一、一条语句解决表单完整交互

内置了对表单N多UI控件的初始化绑定，表单提交时候，按钮的交互等等，和表单验证集成，实际开发的时候，理论上就一行代码就可以满足功能需求。

1. 演示和代码

   手机号码*

   验证码*

   4位数字

   备注

   附件

    

   注册

   表单操作走form元素，里面内置submit类型的原生提交按钮，可访问性隐藏，使用label按钮进行关联。

   <form action="/submit" method="post">
       <div>
           <label for="idTel">手机号<span>*</span></label>
           <input type="tel" id="idTel" class="ui-input" size="40" name="tel" required>
       </div>
       <div>
           <label for="idCode">验证码<span>*</span></label>
           <input type="code" id="idCode" class="ui-input" size="40" name="code" required pattern="\d{4}">
       </div>
       <div>
           <label for="idMark">备注</label>
          <div class="ui-textarea-x" style="width:500px;">
               <textarea id="idMark" maxlength="140" rows="5">附件</textarea>
               <div class="ui-textarea"></div>
           </div>
       </div>
       <div>
           <input type="submit" id="formSubmit" class="clip">
           <label for="formSubmit" class="ui-button ui-button-primary">注册</label>
       </div>
   </form>

   var myForm = new Form($('form'), {
       avoidSend: function() {
           if (/附件/.test($('#idMark').val())) {
               var myConfirm = new Dialog().confirm('您提到了附件，当却没有上传，确定注册？', {
                   buttons: [{
                       events: {
                           click: function() {
                               // 表单请求发送
                               myForm.ajax();
                               // 关闭提示框
                               myConfirm.remove();
                           }
                       }
                   }, {}]
               });
               return true;
           }
       },
       success: function(json) {
           new Dialog().alert('<h6>注册成功！</h6>\
               <p>您注册手机号是：'+ json.data.tel +'</p>', {
               type: 'success'
           });
   
           // 表单重置
           this[0].reset();
       }
   }, {
       label: true
   });

2. 语法和API

   var Form = require('common/comp/Form');
   new Form(elForm, optionCallback, optionValidate);

   其中elForm是表单元素，optionCallback是回调可选参数，具体参见下表：可以直接是Function类型，表示成功回调

   参数名称	支持类型	默认值	释义
   optionCallback	Function|Object	$.noop	表单操作的各种回调处理。支持两种类型，Function和Object. 当参数为Function类型的时候，直接表示成功回调，其中，上下文this表示elForm元素，支持一个参数，为请求数据库返回的JSON数据。还支持Object类型，此时表示一个可选的回调函数集合，完整结构如下： { avoidSend: $.noop, success: $.noop, error: $.noop, complete: $.noop } 其中avoidSend方法表示验证成功之后，请求发送前的条件约束，举例来说，虽然用户数据全部验证成功了，但是备注提到附件，但是却没有上传文件，我们需要确认用户是否是自己的疏忽，就可以用到这里的avoidSend方法，具体可参见本页demo演示。

   optionValidate和表单验证Validate的options可选参数完全对应，不赘述。

3. 实例对象

   var myForm = new Form();

   myForm暴露了一些属性和方法，如下：

   {
       el: {
         // 表单元素
         form: $(),
         // 原生submit类型按钮
         submit: $(),
         // label关联的提交或确认按钮
         button: $(),
       },
       // 验证实例对象
       validate: Object,
       option: {
         // 回调的可选参数们
         callback: {},
         // 验证的可选参数们
         validate: {}
       },
       // 表单请求提交，无验证
       ajax: function() {},
       // 触发表单，会触发验证
       submit: function() {}
   }