LuLu UI pure版中文文档 » 表单解决方案

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

演示和代码

表单操作走<form>元素，按钮类型设置为submit。

HTML如下：

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

// 绑定验证和提交
var myForm = new Form('form', {
    avoidSend: function () {
        if (/附件/.test(eleMark.value)) {
            new Dialog().confirm('您备注中提到了附件，但是却没有上传，确定注册？', {
                buttons: [{
                    events: function (event) {
                        // 请求
                        myForm.ajax();
                        // 弹框移除
                        event.dialog.remove();
                    }
                }, {}]
            });
            // 返回true表示阻止请求发送
            return true;
        }
    },
    success: function (json) {
        new Dialog().alert('<h6>注册成功！</h6>\
            <p>您注册手机号是：'+ json.data.tel +'</p>', {
            type: 'success'
        });
        // 表单重置
        this.element.form.reset();
    }
});

语法和参数

语法

var myForm = new Form(element, optionCallback, optionValidate);

参数

element

必需。Element|String。表单DOM元素或者表单元素对应的选择器。

optionCallback

可选。Function|Object。表单操作的各种回调处理。支持两种类型，Function和Object. 当参数为Function类型的时候，直接表示成功回调。其中，上下文this表示element元素，支持一个参数，为请求数据库返回的JSON数据。还支持Object类型，此时表示一个可选的回调函数集合，完整结构如下：

{
    avoidSend: function () {},
    beforeSend: function () {},
    success: function () {},
    error: function () {},
    complete: function () {}
}

各个回调方法的语法与释义见下表：

语法	释义
avoidSend(eleForm)	该方法表示验证成功之后，请求发送前的条件约束，举例来说，虽然用户数据全部验证成功了，但是备注提到附件，但是却没有上传文件，我们需要确认用户是否是自己的疏忽，就可以用到这里的avoidSend方法。当返回值为true的时候，会阻止Ajax请求的发送。具体可参见本页demo演示。 其中上下文this表示当前实例对象，支持一个参数eleForm，表示当前的表单元素。
beforeSend(xhr, formData)	表示请求发送前的回调处理，本方法无论返回什么值都不会阻止表单请求的执行。本方法多用在对请求对象或者请求数据进行处理，例如新增一些数据，设置请求的过期时间，增加请求头等。 其中上下文this表示当前实例对象，支持两个参数xhr和formData，其中，xhr表示当前请求的XMLHttpRequest对象，formData是即将要发送的FormData数据对象。 beforeSend: function (xhr, formData) { // 2秒过期 xhr.timeout = 2000; // 新增数据 formData.append('_token', 'd94i843fvjfj938754mn8'); }
success(json)	请求成功后的回调。其中上下文this表示当前实例对象，支持一个参数json，表示后端返回的JSON数据。
error()	请求失败后的回调。其中上下文this表示当前实例对象。
complete()	请求完成后的回调。其中上下文this表示当前实例对象。

optionValidate

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

is-from语法

设置了 is-form 属性的 <form> 元素在和页面建立联系的时候，会触发自定义的 connected 事件。

对于一些不太方便获取 DOM 元素的场景，可以使用这个语法进行 Form 实例的构造。

代码如下所示：

<div id="app">
    <template v-if="1">
        <form action="/submit" method="post" is-form @connected="setForm">
            <input type="tel" class="ui-input" name="tel" required>
            <button type="submit" class="ui-button" data-type="primary">点我</button>
        </form>
    </template>
</div>

new Vue({
    el: '#app',
    methods: {
        setForm: function (event) {
            new Form(event.target, function () {
                new Dialog().alert('请求成功');
            });
        }
    }
});

实例对象

var myForm = new Form();

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

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

GET请求测试