使用HTML5的required属性、输入类型、pattern正则和验证API，可实现无需JavaScript的表单必填验证。1. 添加required属性标记必填字段；2. 使用email、url等输入类型确保格式正确；3. 通过pattern配合正则校验自定义格式，如手机号；4. 利用checkValidity()和setCustomValidity()进行脚本控制与自定义提示。
在HTML中实现表单必填项验证，可以通过HTML5内置的验证API来完成，无需JavaScript就能让浏览器自动提示用户填写必要信息。核心方法是使用表单元素的特定属性，浏览器会根据这些属性自动触发校验逻辑。
1. 使用 required 属性标记必填项
最基础也最常用的方式是在输入框上添加 required 属性，表示该字段不能为空。
例如：
<form>
<label>姓名：</label>
<input type="text" name="username" required>
<label>邮箱：</label>
<input type="email" name="email" required>
<button type="submit">提交</button>
</form>
当用户点击提交时，若这些字段为空，浏览器会弹出提示：“请填写此字段”。
2. 结合 input 类型提升验证精度
HTML5支持多种输入类型，如 email、tel、url、number 等，每种类型自带格式校验。配合 required 可实现“必填 + 格式正确”的双重验证。
立即学习“前端免费学习笔记（深入）”；
示例：
- <input type="email" required> —— 必须填写合法邮箱
- <input type="url" required> —— 必须填写合法网址
- <input type="number" min="1" max="100" required> —— 必须填写1到100之间的数字
3. 使用 pattern 属性进行自定义正则验证
对于需要特定格式的字段（如手机号、身份证号），可以使用 pattern 属性定义正则表达式。
比如限制手机号为中国大陆格式：<input type="text" name="phone" required pattern="^1[3-9]\d{9}$" title="请输入正确的手机号码">
其中 title 的内容会在校验失败时显示为提示信息。
4. 利用 HTML5 表单验证 API 进行脚本控制
除了自动提示，你还可以通过 JavaScript 调用HTML5验证API，手动检查表单状态或触发验证。
常用方法：- checkValidity() —— 检查元素是否通过验证，返回布尔值
- setCustomValidity() —— 设置自定义错误消息
<script>
const passwordInput = document.querySelector('input[name="password"]');
passwordInput.addEventListener('input', function() {
if (this.value.length < 6) {
this.setCustomValidity('密码至少6位');
} else {
this.setCustomValidity(''); // 清除错误
}
});
</script>
基本上就这些。利用 required、input 类型、pattern 和 JS 验证API，你可以构建出无需额外库的可靠表单校验机制。虽然简单，但覆盖了大多数常见场景，适合快速开发和轻量级项目。
