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() {}
    }      
Fork Me 返回顶部