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

教程

表单解决方案

安装与调用

引用下面CSS:

<link rel="stylesheet" href="https://unpkg.com/lu2/theme/edge/css/common/form.css">
<link rel="stylesheet" href="https://unpkg.com/lu2/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比较了解对开发者而言,本组件用起来会非常愉悦。

演示和代码

4位数字
 

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

HTML如下(keepfocus属性可以让轻提示出现的时候,焦点不发生转移):

<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类型参数含义如下:

语法 释义
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表示当前表单元素。

myForm.params.validate参数表单验证Validateoptions可选参数中对validate是一致对,不赘述。

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

事件名称 释义
DOMContentLoaded 当自定义表单元素初始化完毕的时候执行。
connected 当自定义表单元素和页面建立连接的时候执行。

GET请求测试

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

设置请求内容类型

如果是GET请求,表单数据会以查询字符串的形式跟在请求地址后面。

如果是POST请求,则支持下面三种请求内容类型(通过设置enctype属性值):

  • multipart/form-data(默认类型)
    <form action="/submit" method="post" is="ui-form"></form>
  • application/x-www-form-urlencoded
    <form action="/submit" method="post" enctype="application/x-www-form-urlencoded" is="ui-form"></form>
  • application/json
    <form action="/submit" method="post" enctype="application/json" is="ui-form"></form>
本页贡献者:

zhangxinxu