HTML 表单与浏览器约束验证：标签、校验和提交安全

<form action="/account" method="post">
  <label for="display-name">显示名称</label>
  <input id="display-name" name="displayName"
         autocomplete="nickname" minlength="2" maxlength="40" required>

  <label for="email">邮箱</label>
  <input id="email" name="email" type="email"
         autocomplete="email" required>

  <label for="password">密码</label>
  <input id="password" name="password" type="password"
         autocomplete="new-password" minlength="12" required>

  <label for="confirmation">确认密码</label>
  <input id="confirmation" name="confirmation" type="password"
         autocomplete="new-password" minlength="12" required>

  <button type="submit">保存资料</button>
</form>

const password = document.querySelector("#password");
const confirmation = document.querySelector("#confirmation");

function validateConfirmation() {
  const mismatch = confirmation.value !== "" && password.value !== confirmation.value;
  confirmation.setCustomValidity(mismatch ? "两次输入的密码不一致" : "");
}

password.addEventListener("input", validateConfirmation);
confirmation.addEventListener("input", validateConfirmation);

<form id="contact-form" action="/contact" method="post" novalidate>
  <section id="error-summary" role="alert" tabindex="-1" hidden>
    <h2>请修正以下字段</h2>
    <ul></ul>
  </section>
  <label for="contact-email">邮箱</label>
  <input id="contact-email" name="email" type="email" required>
  <button type="submit">发送</button>
</form>

const form = document.querySelector("#contact-form");
const summary = document.querySelector("#error-summary");

form.addEventListener("submit", event => {
  const invalid = Array.from(form.elements).filter(
    control => typeof control.checkValidity === "function" && !control.checkValidity()
  );
  if (invalid.length === 0) return;
  event.preventDefault();

  const list = summary.querySelector("ul");
  list.replaceChildren(...invalid.map(control => {
    const item = document.createElement("li");
    const link = document.createElement("a");
    link.href = `#${control.id}`;
    link.textContent = `${control.labels?.[0]?.textContent?.trim() || "字段"}：${control.validationMessage}`;
    item.append(link);
    control.setAttribute("aria-invalid", "true");
    return item;
  }));
  summary.hidden = false;
  summary.focus();
});

form.addEventListener("input", event => {
  const control = event.target;
  if (typeof control.checkValidity !== "function" || !control.checkValidity()) return;
  control.removeAttribute("aria-invalid");
  summary.querySelector(`a[href="#${CSS.escape(control.id)}"]`)?.closest("li")?.remove();
  if (!summary.querySelector("li")) summary.hidden = true;
});

<form action="/api/attachments" method="post" enctype="multipart/form-data">
  <label for="attachment">选择附件</label>
  <input id="attachment" name="attachment" type="file"
         accept=".pdf,.png,.jpg,.jpeg" required
         aria-describedby="attachment-help">
  <p id="attachment-help">仅接受 PDF 或图片，单个文件不超过 10 MB。</p>
  <button type="submit">上传</button>
</form>