这段 css 代码会在输入框内容少于 3 个字符时，将文字颜色和边框颜色变为红色，提示用户输入有误。同时，添加:valid伪类，当输入框内容有效时，恢复默认样式，提供更清晰的反馈。
2. 使用 oninvalid 事件处理程序
这种方法通过监听 oninvalid 事件，在输入框内容验证不通过时，执行特定的 JavaScript 代码，例如显示警告信息。
<input type="text" oninvalid="alert('请输入至少 3 个字符');" required minlength="3">这段代码会在输入框内容少于 3 个字符时，弹出一个警告框，提示用户输入至少 3 个字符。
代码示例（结合两种方法）
立即学习“前端免费学习笔记（深入）”；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>minlength 示例</title>
<style>
input:invalid {
color: red;
border-color: red;
}
input:valid {
color: black;
border-color: black;
}
</style>
</head>
<body>
<form>
<label for="input-word">请输入单词 (至少 3 个字符):</label>
<input type="text" id="input-word" name="input-word" required minlength="3" oninvalid="this.setCustomValidity('请输入至少 3 个字符');" oninput="this.setCustomValidity('');">
<button type="submit">提交</button>
</form>
</body>
</html>代码解释：
- required 属性: 确保用户必须填写此字段。
- minlength="3" 属性: 指定最小长度为 3 个字符。
- oninvalid="this.setCustomValidity('请输入至少 3 个字符');" 属性: 当输入无效时，设置自定义验证消息。
- oninput="this.setCustomValidity('');" 属性: 当用户开始输入时，清除自定义验证消息，以便在输入有效后移除错误提示。
注意事项：
- setCustomValidity() 方法允许你自定义验证错误消息。在oninvalid事件中使用它可以覆盖浏览器默认的错误提示。
- 在oninput事件中清除自定义验证消息非常重要，这样当用户输入有效内容后，错误提示会自动消失。
- 确保你的浏览器支持 HTML5 的 minlength 属性。
总结
通过结合 CSS 样式和 oninvalid 事件处理程序，可以有效地解决 HTML 输入框 minlength 属性失效的问题，并提供更友好的用户体验。 建议同时使用这两种方法，以确保在各种浏览器和情况下都能正确地进行客户端验证。此外，始终建议在服务器端进行数据验证，以确保数据的完整性和安全性。
