omii-ui/src/form/index.jsx

使用OMII开发的WebComponents库，样式采用bootstrap。可以作为标准的esmodule使用

const { h, classNames, extractClass, createRef } = omii;

function inputingHandler(evt) {
  const form = evt.currentTarget;
  form.checkValidity();
  form.classList.add("was-validated");
}
function validateElement(el) {
  const { validity } = el;
  if (!validity) return;
  if (!validity.valid) {
    const invalids = [];
    for (let p in validity) {
      if (p !== "valid" && validity[p] === true) {
        invalids.push(p);
      }
    }
    if (invalids.length) el.dataset.invalid = invalids.join(" ");
    if (el.validationMessage)
      el.dataset.validationMessage = el.validationMessage;
  } else {
    delete el.dataset.invalid;
    delete el.dataset.validationMessage;
  }
}
/**
 * 自定义验证，所有标记 data-validate 属性的元素
 * @param {HTMLFormElement} form
 * @returns
 */
function checkCustomValidity(form) {
  const others = [...form.querySelectorAll("[data-validate]")];
  const all = [new Set([...others, ...form.elements])];
  all.forEach((el) => {
    validateElement(el);
  });
  const validities = others.map((other) =>
    other.checkValidity ? other.checkValidity() : true
  );
  return validities.every((ok) => ok);
}

function submitHandler(evt) {
  const form = evt.target;

  form.removeEventListener("input", inputingHandler);
  form.addEventListener("input", inputingHandler, false);

  if (!OIForm.checkValidity(form)) {
    evt.preventDefault();
    evt.stopPropagation();
  }
}
export default class OIForm extends HTMLFormElement {
  static validate(form) {
    form.noValidate = true;
    form.removeEventListener("submit", submitHandler);
    form.addEventListener("submit", submitHandler, true);
  }
  static checkValidity(form) {
    form.classList.add("was-validated");
    if (form instanceof OIForm) {
      return form.checkValidity();
    } else {
      return [form.checkValidity(), checkCustomValidity(form)].every(
        (ok) => ok
      );
    }
  }

  static reset(form) {
    form.classList.remove("was-validated");
    form.reset();
  }

  reset() {
    this.classList.remove("was-validated");
    super.reset();
  }
  validate() {
    return this.checkValidity();
  }
  checkValidity() {
    this.classList.add("was-validated");
    return [super.checkValidity(), checkCustomValidity(this)].every((ok) => ok);
  }

  connectedCallback() {
    this.constructor.validate(this);
  }
}