使用 required 属性
这是最直接、最常用的方法，你只需要在 <input> 标签中添加 required 属性即可。
（图片来源网络，侵删）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">必填项示例</title>
</head>
<body>
<form>
<label for="username">用户名:</label>
<input type="text" id="username" name="username" required>
<!-- 在这个 input 中添加了 required 属性 -->
<br><br>
<label for="email">电子邮箱:</label>
<input type="email" id="email" name="email" required>
<br><br>
<button type="submit">提交</button>
</form>
</body>
</html>
工作原理：
当用户尝试提交表单时，如果任何一个带有 required 属性的 <input> 字段是空的，浏览器会自动阻止提交，并显示一个默认的提示信息，告诉用户此字段为必填项,这个提示信息是浏览器根据操作系统和语言自动生成的。
针对不同类型输入框的 required 应用
required 属性可以应用于绝大多数 <input> 类型,包括：
- 文本输入:
<input type="text" required> - 邮箱:
<input type="email" required>(不仅检查是否为空,还会验证格式是否为有效邮箱) - 密码:
<input type="password" required> - 数字:
<input type="number" required> - 电话号码:
<input type="tel" required> - URL:
<input type="url" required>(会验证格式是否为有效网址) - 单选框组: 当有一组单选框时，通常只需要将
required添加到<fieldset>或其中一个<input>上。<fieldset> <legend>性别 (必填)</legend> <input type="radio" id="male" name="gender" value="male" required> <label for="male">男</label> <input type="radio" id="female" name="gender" value="female"> <label for="female">女</label> </fieldset> - 复选框: 对于单个复选框，
required表示用户必须勾选它。<input type="checkbox" id="terms" name="terms" required> <label for="terms">我同意服务条款和隐私政策</label>
- 下拉选择: 对于
<select>，required表示用户必须选择一个非空选项。<select name="country" required> <option value="">-- 请选择国家 --</option> <option value="cn">中国</option> <option value="us">美国</option> </select> - 文本域:
<textarea required></textarea>
高级用法和最佳实践
仅仅使用 required 是不够的，为了提供更好的用户体验,你还需要考虑以下几点。
添加视觉提示
用户可能不知道哪些字段是必填的，通过添加视觉提示（如红色星号 ）可以明确告知用户。
（图片来源网络，侵删）
<style>
.required-label::after {
content: " *";
color: red;
}
</style>
<form>
<!-- 方法一：使用 CSS 伪元素自动添加星号 -->
<label for="username" class="required-label">用户名:</label>
<input type="text" id="username" name="username" required>
<br><br>
<!-- 方法二：直接在 HTML 中写星号 -->
<label for="email">电子邮箱:</label>
<span style="color: red;">*</span>
<input type="email" id="email" name="email" required>
</form>
提供清晰的错误提示
浏览器默认的提示信息可能不够友好或不符合你的设计，你可以使用 HTML5 的 setCustomValidity() 方法来自定义错误信息。
这通常需要一点 JavaScript。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">自定义错误提示</title>
<style>
.error-message {
color: red;
font-size: 0.9em;
display: none; /* 默认隐藏 */
margin-top: 5px;
}
input:invalid:not(:placeholder-shown) { /* 当输入无效且不是占位符时显示样式 */
border-color: red;
}
</style>
</head>
<body>
<form>
<label for="username">用户名 (至少3个字符):</label>
<input type="text" id="username" name="username" required minlength="3">
<div id="username-error" class="error-message">用户名长度不能少于3个字符。</div>
<br><br>
<button type="submit">提交</button>
</form>
<script>
const usernameInput = document.getElementById('username');
const usernameError = document.getElementById('username-error');
// 当输入框失去焦点时验证
usernameInput.addEventListener('blur', function() {
if (this.validity.tooShort) {
this.setCustomValidity('用户名长度不能少于3个字符。');
usernameError.style.display = 'block';
} else {
this.setCustomValidity(''); // 清除自定义错误信息
usernameError.style.display = 'none';
}
});
// 当用户开始输入时，隐藏错误信息
usernameInput.addEventListener('input', function() {
if (this.value.length >= 3) {
this.setCustomValidity('');
usernameError.style.display = 'none';
}
});
</script>
</body>
</html>
结合其他验证属性
required 通常与其他验证属性一起使用,效果更佳。
minlength/maxlength: 设置输入内容的最小/最大长度。<input type="text" required minlength="6" maxlength="20">
min/max: 设置数字或日期的最小/最大值。<input type="number" required min="18" max="99">
pattern: 使用正则表达式进行格式验证。<!-- 只允许输入字母 --> <input type="text" required pattern="[A-Za-z]+">
type: 使用email,url,tel等类型,浏览器会进行相应的格式检查。
| 方法/属性 | 描述 | 示例 |
|---|---|---|
required |
核心，声明该字段为必填。 | <input type="text" required> |
| 视觉提示 | 告知用户哪些是必填项。 | <label class="required-label">...</label> 或 <span style="color:red">*</span> |
minlength/maxlength |
限制输入文本的长度。 | <input required minlength="8"> |
min/max |
限制数字或日期的范围。 | <input type="number" required min="0"> |
pattern |
使用正则表达式进行格式验证。 | <input required pattern="[0-9]{3}-[0-9]{4}"> |
| 自定义错误 | 通过 JavaScript 提供更友好的错误信息。 | input.setCustomValidity('错误信息') |
最佳实践建议：
（图片来源网络，侵删）
- 始终使用
required：对于必填项,这是第一道防线。 - 提供视觉反馈：用星号或其他方式明确标示必填项。
- 组合使用验证属性：利用
minlength,type="email"等属性进行前端初步验证,减轻服务器压力。 - 考虑无障碍性：确保你的表单对使用屏幕阅读器的用户也是友好的，
<label>标签至关重要。 - 后端验证是关键：前端验证可以提升用户体验，但永远不要信任前端数据，所有来自表单的数据在到达服务器后都必须进行再次验证和处理,以确保安全性和数据完整性。
