HTML5提供原生表单验证功能：一、用required、type、min/max/step等属性实现必填与范围校验；二、pattern结合正则校验格式；三、date/url等新类型控件增强体验；四、novalidate禁用原生验证；五、:valid/:invalid等CSS伪类响应状态。
如果您希望在网页中创建具备内置验证功能的表单，HTML5 提供了原生的表单控件与属性，无需依赖 JavaScript 即可实现基础输入校验。以下是基于 HTML5 的 form 元素与 input、select 等控件设计验证表单的具体方法：
一、使用语义化表单控件与必填属性
HTML5 支持通过 required 属性强制用户填写字段，浏览器会在提交时自动检测空值并提示。该方式依赖浏览器原生行为，兼容性良好且无需额外脚本。
1、在 <form> 标签内添加 <input type="text" name="username" required> 控件。
2、为邮箱字段设置 type="email" 并添加 required 属性，如：<input type="email" name="email" required>。
立即学习“前端免费学习笔记（深入）”；
3、为数字输入框使用 type="number"，并添加 min、max 和 step 属性限制取值范围。
4、对下拉菜单使用 <select required>，并在第一个 <option> 中设置空值和占位文本：<option value="" disabled selected>请选择身份</option>。
二、利用正则表达式进行格式验证
HTML5 的 pattern 属性允许通过正则表达式定义输入格式规则，浏览器在提交前执行匹配校验。该方式适用于手机号、身份证号等有固定格式的字段。
1、为手机号输入框添加 pattern 属性：<input type="tel" name="phone" pattern="^1[3-9]\d{9}$" title="请输入有效的11位中国大陆手机号">。
2、为密码字段设置至少8位且含字母与数字的规则：<input type="password" name="pwd" pattern="(?=.*[a-zA-Z])(?=.*\d).{8,}" title="密码需包含字母和数字，长度不少于8位">。
3、将 title 属性内容会作为验证失败时的提示文字显示，应确保其表述清晰易懂。
三、结合新类型控件与属性提升体验
HTML5 新增的 input 类型（如 date、url、search）及属性（如 placeholder、autofocus）可在不写 JS 的前提下增强可用性与验证粒度。
1、使用 <input type="date"> 替代文本输入，浏览器自动提供日期选择器并校验格式。
2、为搜索框设置 type="search"，部分浏览器会添加清除按钮并优化语义。
3、添加 placeholder="请输入用户名" 提供输入提示，autofocus 让页面加载后焦点自动落在指定字段。
4、对需要唯一性的字段（如用户名注册），使用 autocomplete="off" 防止浏览器填充历史值干扰验证逻辑。
四、使用 novalidate 属性临时禁用原生验证
当需要完全由 JavaScript 控制验证流程时，可在 <form> 标签中添加 novalidate 属性，关闭浏览器默认的提交前校验行为。
1、在表单开始处写入：<form novalidate>。
2、此时所有 required、pattern 等属性仍保留在 DOM 中，但不会触发原生提示。
3、novalidate 不影响自定义 JavaScript 验证逻辑的执行，仅屏蔽浏览器内置反馈。
五、通过 CSS 伪类响应验证状态
HTML5 定义了 :valid、:invalid、:required 等伪类，可用于动态改变表单控件样式，直观反映当前输入是否符合要求。
1、为有效输入添加绿色边框：input:valid { border-color: #28a745; }。
2、为无效且已失焦的字段添加红色背景：input:invalid:not(:placeholder-shown) { background-color: #fff5f5; }。
3、隐藏初始状态下因未输入而触发的红色提示，仅在用户操作后生效：input:invalid:focus { outline: 2px solid #dc3545; }。
