LuLu UI pure版中文文档 »

Fork Me

表单解决方案

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

演示和代码

4位数字
 

表单操作走<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表示当前实例对象,支持两个参数xhrformData,其中,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参数和表单验证Validateoptions可选参数完全对应,不赘述。

实例对象

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请求测试

打开控制台,观察URL请求参数:

本页贡献者:

zhangxinxu