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

安装与调用

引用下面CSS：

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

JS为：

<script type="module" src="https://unpkg.com/lu2/theme/edge/js/common/comp/Form.js"></script>

或者：

<script type="module">
    import "https://unpkg.com/lu2/theme/edge/js/common/comp/Form.js";
</script>

本组件为内置自定义元素组件，如果需要兼容Safari浏览器，还需要引入下面的JS。

<script src="https://unpkg.com/lu2/theme/edge/js/common/safari-polyfill.js"></script>

由于此Polyfill执行了querySelectorAll匹配，因此Safari浏览器下，组件connetedCallback生命周期函数的执行时机比Chrome/Firefox浏览器靠后，因此，如果要兼容Safari浏览器，在执行参数设置的时候，可以在当前表单元素的DOMContentLoaded或connected回调中设置。详见本文档源代码。

如果是npm安装调用，则：

import 'lu2/theme/edge/css/common/form.css';
import 'lu2/theme/edge/css/common/ui/LightTip.css';
import 'lu2/theme/edge/js/common/safari-polyfill.js';
import 'lu2/theme/edge/js/common/ui/Form.js';

如果 JS import语法报错，试试在业务代码中动态引入。

import('lu2/theme/edge/js/common/safari-polyfill.js');
import('lu2/theme/edge/js/common/ui/Form.js');

概述

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

对于那些对HTML比较了解对开发者而言，本组件用起来会非常愉悦。

演示和代码

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

HTML如下：

<form action="/submit" method="post" is="ui-form" keepfocus>
    <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 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"]');

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

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