Shoelace-CSS 表单控件深度解析：从基础使用到高级验证-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00631/article/details/148392020

Shoelace-CSS 表单控件深度解析：从基础使用到高级验证

shoelace 项目地址: https://gitcode.com/gh_mirrors/sho/shoelace-css

前言

在现代 Web 开发中，表单是与用户交互的重要方式之一。Shoelace-CSS 提供了一套美观、易用且功能强大的表单控件组件，本文将深入探讨这些组件的使用方法和验证机制。

表单控件与封装 DOM

Shoelace 的所有组件都使用了封装 DOM 技术来封装标记、样式和行为。这种技术带来了组件化的优势，但也导致了一个问题：原生的 <form> 元素无法直接识别位于封装 DOM 中的表单控件。

解决方案

Shoelace 通过监听表单的 formdata 事件来解决这个问题。当表单提交时，Shoelace 的表单控件会自动将它们的值添加到用于提交表单的 FormData 对象中。这使得大多数情况下表单都能正常工作。

重要提示：如果你在表单上附加了事件监听器，必须在 Shoelace 表单控件连接到 DOM 之后再添加，否则你的逻辑会在 Shoelace 有机会注入表单数据和验证表单控件之前运行。

数据序列化

数据序列化是指收集表单数据的过程。如果你依赖标准的表单提交方式（如 <form action="...">），可以跳过这部分。但对于大多数现代应用，通常会使用 Fetch API 或类似 axios 的库通过 JavaScript 提交表单。

使用 FormData

FormData 接口提供了一种标准的方式来序列化浏览器中的表单：

const form = document.querySelector('form');
const data = new FormData(form);

Shoelace 的序列化工具

Shoelace 提供了一个序列化工具，可以收集表单数据并返回一个简单的 JavaScript 对象：

import { serialize } from '@shoelace-style/shoelace/dist/utilities/form.js';

const form = document.querySelector('form');
const data = serialize(form);

这个工具会返回一个包含所有表单控件名称/值对的对象。如果有多个表单控件共享相同的名称，值将以数组形式返回。

约束验证

Shoelace 表单控件支持通过浏览器的约束验证 API 进行客户端验证。你可以使用 required、pattern、minlength、maxlength 等属性来激活验证。

必填字段

使用 required 属性可以将字段标记为必填。必填字段会自动在其标签后添加一个 * 号（可通过 --sl-input-required-content 自定义属性配置）。

<sl-input name="name" label="Name" required></sl-input>

输入模式

使用 pattern 属性可以限制输入值必须匹配特定的正则表达式模式：

<sl-input name="letters" required label="Letters" pattern="[A-Za-z]+"></sl-input>

输入类型

某些输入类型会自动触发约束验证，如 email 和 url：

<sl-input type="email" label="Email" placeholder="you@example.com" required></sl-input>
<sl-input type="url" label="URL" placeholder="https://example.com/" required></sl-input>

自定义错误消息

通过调用 setCustomValidity() 方法可以创建自定义验证错误：

const input = document.querySelector('sl-input');
input.addEventListener('sl-input', () => {
  if (input.value === 'shoelace') {
    input.setCustomValidity('');
  } else {
    input.setCustomValidity("请先输入'shoelace'再提交！");
  }
});

自定义验证样式

Shoelace 默认不提供表单控件的验证样式，而是通过数据属性来反映控件的验证状态：

data-required - 必填字段
data-optional - 可选字段
data-invalid - 当前无效
data-valid - 当前有效
data-user-invalid - 用户交互后无效
data-user-valid - 用户交互后有效

样式示例

/* 无效状态样式 */
sl-input[data-user-invalid]::part(base) {
  border-color: var(--sl-color-danger-600);
}

/* 有效状态样式 */
sl-input[data-user-valid]::part(base) {
  border-color: var(--sl-color-success-600);
}