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

安装与调用

引用下面CSS：

<link rel="stylesheet" href="https://qidian.gtimg.com/lulu/theme/edge/css/common/ui/LightTip.css">

JS为：

<script type="module" src="https://qidian.gtimg.com/lulu/hope/ui/Form/index.js"></script>

或者：

<script type="module">
    import "https://qidian.gtimg.com/lulu/hope/ui/Form/index.js";
</script>

概述

通过给 <form> 元素设置 is="ui-form" 让原生表单和 LuLu UI 高度集成，包括表单验证、表单提交功能，按钮的交互细节等。

演示和代码

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

HTML如下：

<form action="/submit" method="post" is="ui-form">
    <label for="idTel">手机号</label>
    <input type="tel" id="tel" is="ui-input" name="tel" required>
    <label for="idCode">验证码</label>
    <input type="code" id="code" is="ui-input" name="code" required pattern="\d{4}">
    <label for="mark">备注</label>
    <textarea id="mark" maxlength="140" rows="1" is="ui-textarea">附件</textarea>
    <button type="submit" is="ui-button" data-type="primary">注册</button>
</form>

// 备注输入框元素
var eleMark = document.querySelector('#idMark');
// 获取输入框元素所在对表单
var myForm = eleMark.form;
// 设置提交之前的特殊验证
myForm.params.avoidSend = function () {
    if (/附件/.test(eleMark.value)) {
        new Dialog().confirm('您备注中提到了附件，但是却没有上传，确定注册？', {
            buttons: [{
                events: function (event) {
                    // 请求
                    myForm.ajax();
                    // 弹框移除
                    event.dialog.remove();
                }
            }, {}]
        });
        // 返回true表示阻止请求发送
        return true;
    }
};
// 设置请求成功之后对处理逻辑
myForm.callback.success = function (json) {
    new Dialog().alert(`<h6>注册成功！</h6>
        <p>您注册手机号是：${json.data.tel}</p>`, {
        type: 'success'
    });

    // 表单重置
    this.reset();
};
// xhr 是 XMLHttpRequest 对象，formData 是要提交的 FormData 数据
myForm.callback.beforeSend = function (xhr, formData) {
    // 增加请求头信息
    xhr.setRequestHeader('From', 'LuLu UI');
};

语法和参数

已知：

let myForm = document.querySelector('form[is="ui-form"]');

则所有的参数设置均围绕 myForm 展开。

myForm 暴露了以下属性和方法：

{
    element: {
      // 原生submit类型按钮
      submit: function () {},
      // 视觉可见提交按钮元素
      button: function () {},
    },
    params: {
        // 表单额外验证数据
        validate: [],
        // 表单数据发送之前对阻止处理
        avoidSend: () => {}
    },
    // 验证实例对象
    validate: Object,
    // 回调的可选参数们
    callback: {
      beforeSend: (xhr, formData) => {},
      // 请求成功
      success: (json) => {},
      // 请求失败
      error: () => {},
      // 请求完成
      complete: () => {}
    },
    // 表单请求提交，无验证
    ajax: function() {}
}

参数

其中几个function类型参数含义如下：

beforeSend: function (xhr, formData) {
    // 2秒过期
    xhr.timeout = 2000;
    // 新增数据
    formData.append('_token', 'd94i843fvjfj938754mn8');
}

myForm.params.validate参数表单验证Validate的options可选参数中对validate是一致对，不赘述。

myForm还支持如下两个自定义事件。

GET请求测试