学习前提

理解HTML表单、约束校验及JavaScript submit事件。

本课完成后你能做什么

结合原生约束和业务校验，让鼠标与键盘提交获得同样反馈。

先理解机制

先用label、required和maxlength表达基础约束，再在submit处理器检查业务规则。submit比监听按钮click覆盖更完整，包括输入框回车。preventDefault只是停止浏览器默认提交，不等于数据已经发送或保存。

空格字符串能通过某些原生必填判断，业务层需trim后再检查。错误提示应说明具体修正方法；role=status适合非打断式结果反馈。多个字段的错误需要与对应输入关联，例如aria-describedby。

客户端验证服务于体验，服务端必须重复校验长度、类型和权限。示例只在本页显示结果，不向服务器提交。显示昵称时用textContent，确保HTML样式的输入仍显示为文字。

可运行示例

<form id="demo">
<label for="nickname">Nickname</label>
<input id="nickname" name="nickname" required maxlength="30">
<button>Check</button>
</form>
<p id="message" role="status"></p>
<script>
document.querySelector("#demo").addEventListener("submit", event => {
  event.preventDefault();
  const name = document.querySelector("#nickname").value.trim();
  document.querySelector("#message").textContent = name ? "Hello, " + name : "Please enter a nickname.";
});
</script>

推演与验证

测试空值、纯空格、正常昵称和30字符边界。分别用点击与Enter提交；在昵称输入<b>Alex</b>，页面应显示文字而不是加粗元素。观察Network确认本例没有提交请求。

常见错误与边界

maxlength的计数与用户看到的字符数量可能不同，复杂emoji需要另定规则。不要在用户每敲一个字时清空输入，也不要把所有错误仅放到颜色边框中。

动手练习

增加课程选择框，未选择时给出明确提示，并保留已输入的昵称。

参考解法与理由

使用带空value的提示option与required select。原生验证负责必填，业务处理器读取选中值并验证允许列表，最后再生成结果。

进一步阅读