@duskmoon-dev/el-form (日语)

用 Web 组件构建的验证支持的窗体容器组件 .

安装

bun add @duskmoon-dev/el-form

使用量

自动注册

import '@duskmoon-dev/el-form/register';

<el-dm-form>
  <el-dm-input name="email" label="Email" required></el-dm-input>
  <el-dm-button type="submit">Submit</el-dm-button>
</el-dm-form>

手工登记

import { ElDmForm, register } from '@duskmoon-dev/el-form';

// Register with default tag name
register();

// Or register with custom tag name
customElements.define('my-form', ElDmForm);

属性

CSS 组件

活动

实例

基本形式

<el-dm-form>
  <el-dm-input name="username" label="Username" required></el-dm-input>
  <el-dm-input name="email" label="Email" type="email" required></el-dm-input>
  <el-dm-button type="submit">Submit</el-dm-button>
</el-dm-form>

处理提交

const form = document.querySelector('el-dm-form');
form.addEventListener('submit', (e) => {
  e.preventDefault();
  const { formData, values } = e.detail;
  console.log('Form values:', values);
});

已禁用窗体

<el-dm-form disabled>
  <el-dm-input name="field" label="Field"></el-dm-input>
</el-dm-form>

有验证

<el-dm-form id="myForm">
  <el-dm-input
    name="email"
    label="Email"
    type="email"
    required
    validation-state="invalid"
    error-message="Please enter a valid email"
  ></el-dm-input>
</el-dm-form>

许可证

麻省理工学院