本文介绍如何利用 HTML5 required 属性和 type 语义化特性，无需 JavaScript 即可实现输入框非空校验、邮箱格式验证，并在提交失败时自动显示浏览器原生错误提示。
本文介绍如何利用 html5 `required` 属性和 `type` 语义化特性，无需 javascript 即可实现输入框非空校验、邮箱格式验证，并在提交失败时自动显示浏览器原生错误提示。
在现代 Web 开发中，表单验证不必依赖冗余的 JavaScript 逻辑——HTML5 提供了简洁、可靠且无障碍友好的原生验证机制。只需为 <input> 元素添加 required 属性，并结合正确的 type（如 text、email、password），浏览器即可自动拦截空提交、执行基础格式校验，并在对应字段下方（或通过 tooltip）展示清晰的本地化错误消息。
✅ 正确用法示例（推荐）：
<form> <label for="first-name">First name:</label> <input type="text" id="first-name" name="firstName" required> <p id="first-p" aria-live="polite"></p> <label for="last-name">Last name:</label> <input type="text" id="last-name" name="lastName" required> <p id="last-p" aria-live="polite"></p> <label for="email">Email:</label> <input type="email" id="email" name="email" required> <p id="email-p" aria-live="polite"></p> <label for="password">Password:</label> <input type="password" id="password" name="password" required minlength="6"> <p id="password-p" aria-live="polite"></p> <button type="submit">Submit</button> </form>
⚠️ 注意事项：
-
onsubmit="formValidator()"不应写在<input type="submit">上：onsubmit是<form></form>的事件属性，且需配合event.preventDefault()才能阻止默认提交行为；否则页面将刷新，导致提示一闪而逝。 -
避免赋值误写为比较：原代码中
if (fname.value = '')是赋值操作（应为=== ''），这会导致逻辑错误并污染数据。 -
required+type="email"自动校验格式：用户输入test@会触发“Please enter an email address”提示，无需正则手动判断。 -
增强可访问性：为提示
<p></p>添加aria-live="polite"，使屏幕阅读器能播报动态错误信息。 - 如需自定义错误消息，可结合
setCustomValidity()方法（进阶用法），但对基础场景非必需。
总结：优先使用语义化 HTML5 属性（required、type、minlength 等）构建健壮表单，既减少 JS 代码量，又提升兼容性、性能与用户体验。仅在需要复杂业务规则（如两次密码比对、用户名唯一性检查）时，再补充 JavaScript 验证逻辑。
立即学习“前端免费学习笔记（深入）”；
