这段css代码会在输入框内容长度小于minlength时，将其边框和文字颜色设置为红色；当输入框内容满足minlength且通过其他验证规则时，将其边框颜色设置为绿色。
2. JavaScript事件监听器
使用JavaScript的invalid事件监听器，可以在输入框内容不符合验证规则时触发自定义的错误提示。
<input type="text" id="input-word" required minlength="3" oninvalid="alert('请输入至少3个字符');" oninput="setCustomValidity('')">这段HTML代码中，oninvalid属性指定了当输入框内容无效时弹出的警告框。oninput="setCustomValidity('')"用于在用户每次输入时清除之前的错误提示，确保提示信息是最新的。
此外，可以使用addEventListener来监听invalid事件，提供更灵活的错误处理方式：
const inputWord = document.querySelector("#input-word");
inputWord.addEventListener('invalid', function(event){
if (inputWord.value.length === 0) {
event.target.setCustomValidity('请输入内容');
} else if (inputWord.value.length < 3) {
event.target.setCustomValidity('请输入至少3个字符');
} else {
event.target.setCustomValidity(''); // 必须设置为空字符串，否则无效
}
});
inputWord.addEventListener('input', function(event){
event.target.setCustomValidity('');
});这段JavaScript代码首先获取输入框元素，然后添加一个invalid事件监听器。当输入框内容无效时，根据不同的情况设置不同的错误提示信息。setCustomValidity('')用于清除之前的错误提示。
立即学习“前端免费学习笔记（深入）”；
3. 结合HTML属性和JavaScript验证
可以结合HTML的minlength属性和JavaScript代码，实现更强大的表单验证功能。修改原代码的onClickSubmitButton函数，可以先检查输入框的validity属性，然后再执行后续操作。
const onClickSubmitButton = (e) => {
e.preventDefault();
word = inputWord.value;
if (!inputWord.validity.valid) {
alert(inputWord.validationMessage || "输入无效"); // 使用validationMessage获取浏览器默认提示
inputWord.focus();
return;
}
if ((previousWord.textContent === "") || (previousWord.textContent[previousWord.textContent.length - 1] === word[0])) {
previousWord.textContent = word;
inputWord.value = "";
inputWord.focus();
flag = true;
} else {
alert("GAME_OVER");
inputWord.value = "";
previousWord.textContent = "";
numberOfPeople.textContent = "";
number = null;
submitButton.removeEventListener("click", onClickSubmitButton);
return;
}
}这段代码首先检查inputWord.validity.valid属性，如果为false，则表示输入框内容不符合验证规则。然后，使用inputWord.validationMessage获取浏览器默认的错误提示信息，并将其显示给用户。
4. 移除不必要的flag变量
原代码中使用了多个flag变量来控制流程，这可能会导致代码难以理解和维护。可以简化代码，移除不必要的flag变量。
(function() {
let number = parseInt(prompt("How many people are participating in the game?"));
if (!number) {
while (!number) {
number = parseInt(prompt("Please enter a number."));
}
}
numberOfPeople.textContent = number;
const onClickSubmitButton = (e) => {
e.preventDefault();
const word = inputWord.value;
if (!inputWord.validity.valid) {
alert(inputWord.validationMessage || "输入无效");
inputWord.focus();
return;
}
if ((previousWord.textContent === "") || (previousWord.textContent[previousWord.textContent.length - 1] === word[0])) {
previousWord.textContent = word;
inputWord.value = "";
inputWord.focus();
} else {
alert("GAME_OVER");
inputWord.value = "";
previousWord.textContent = "";
numberOfPeople.textContent = "";
number = null;
submitButton.removeEventListener("click", onClickSubmitButton);
return;
}
}
submitButton.addEventListener("click", onClickSubmitButton);
})()总结
通过结合CSS样式和JavaScript事件监听器，可以有效地解决HTML输入框minlength属性失效的问题。选择合适的解决方案取决于具体的需求和应用场景。
- 使用CSS的:invalid伪类可以提供直观的视觉反馈。
- 使用JavaScript的invalid事件监听器可以实现自定义的错误提示。
- 结合HTML属性和JavaScript验证可以实现更强大的表单验证功能。
- 简化代码，移除不必要的flag变量可以提高代码的可读性和可维护性。
在实际开发中，建议根据具体情况选择合适的解决方案，并进行充分的测试，以确保表单验证功能的正确性和可靠性。
