前端Wiki/HTML5/基础/增强表单

表单验证与提示属性

HTML5 把"提交前校验"做成了声明式：写上属性，浏览器自动执行。核心属性：required 必填；pattern 正则约束；min/max/step 数值与日期范围；minlength/maxlength 文本长度；type 本身（email/url）也参与校验。

验证失败时浏览器阻止提交，并在控件旁弹出气泡提示。提示文字可用 title 属性补充说明（配合 pattern 使用）。错误状态会反映在 CSS 伪类上：:invalid 非法、:valid 合法，可以做即时描红反馈。

两个实用补充：form 上加 novalidate 可整体关闭原生验证（想用 JS 接管提示文案时用）；需要精确控制提示时用 JS 的 input.setCustomValidity('文案') 设置自定义错误信息，传空字符串表示"没有错误"。

本节要点required/pattern/min/max 声明即验证；:invalid/:valid 做样式反馈；novalidate 关闭原生验证、setCustomValidity 自定义文案；前端验证是体验优化，服务端必须复核。

HTML

<form action="/api/join" method="post">
  <!-- required + pattern：6~12 位字母开头，可含数字 -->
  <input type="text" name="user" required
         pattern="[A-Za-z][A-Za-z0-9]{5,11}"
         title="字母开头，6~12 位字母或数字"
         placeholder="用户名">

  <!-- 数值范围验证 -->
  <input type="number" name="age" required min="18" max="99">

  <input type="email" name="mail" required>
  <button type="submit">加入</button>
</form>

<style>
  /* 提交前即时反馈：非法输入描红 */
  input:invalid { border: 2px solid #e5534b; }
  input:valid   { border: 2px solid #3fb950; }
</style>

🔗 相关词条HTML5 input form CSS 浏览器声明式 JS 前端

📚 推荐阅读

ECharts 图表教程万象云档

PWA 应用实战万象云档

移动前端开发经验指南万象云档

Socket.IO v4 中文文档万象云档

Electron 27 中文文档万象云档

来自万象云档的免费在线书籍，点击封面直接阅读