如何实现提交空姓名输入框时在其下方显示提示文本（HTML/JavaScript）

嘿，刚学一周HTML和JS就开始折腾表单验证啦，这进度很赞！针对你说的“提交空输入时显示提示”的需求，我给你整理了一套简单易懂的实现方案，直接看代码和解释就懂啦～

核心思路 #

我们需要做两件事：

• 在每个输入框下方预留一个显示提示的位置
• 提交时检查输入值是否为空（包括只输入空格的情况），为空就把提示文本放到对应的位置里，不为空则清除提示

完整代码示例 #

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 给错误提示加个显眼的样式 */
        .error {
            color: red;
            font-size: 14px;
            display: block;
        }
    </style>
</head>
<body>
    <form onsubmit="return showInput();">
        名字: <input type="text" id="fname">
        <span class="error" id="fnameError"></span><br>
        
        姓氏: <input type="text" id="lname">
        <span class="error" id="lnameError"></span><br>
        
        <input type="submit" value="提交">
    </form>
    <div id="displayname"></div>

    <script>
        function showInput() {
            // 获取输入值并去除首尾空格（避免只输空格的情况）
            const fname = document.getElementById("fname").value.trim();
            const lname = document.getElementById("lname").value.trim();
            
            // 获取提示元素
            const fnameError = document.getElementById("fnameError");
            const lnameError = document.getElementById("lnameError");
            const displayName = document.getElementById("displayname");
            
            // 初始化状态为验证通过
            let isValid = true;
            
            // 检查名字是否为空
            if (fname === "") {
                fnameError.textContent = "请输入名字";
                isValid = false;
            } else {
                fnameError.textContent = ""; // 清除错误提示
            }
            
            // 检查姓氏是否为空
            if (lname === "") {
                lnameError.textContent = "请输入姓氏";
                isValid = false;
            } else {
                lnameError.textContent = ""; // 清除错误提示
            }
            
            // 如果验证通过，再显示名字
            if (isValid) {
                const currentDate = new Date().toLocaleString(); // 获取当前时间
                displayName.innerHTML = `${fname} ${lname} visited this on ${currentDate}`;
            } else {
                displayName.innerHTML = ""; // 验证不通过时清空显示内容
            }
            
            // 阻止表单默认提交行为（因为我们用JS处理了逻辑）
            return false;
        }
    </script>
</body>
</html>

关键细节解释 #

• trim()方法：用来去除输入值首尾的空格，这样用户只输入空格也会被判定为空，逻辑更严谨。
• 错误提示元素：用<span>放在每个输入框下方，专门用来显示错误信息，通过修改textContent来控制显示内容。
• return false：放在函数最后，阻止表单的默认提交跳转行为，让我们的JS逻辑完全接管处理流程。
• 样式优化：给错误提示加了红色字体，让用户一眼就能定位到出错的输入框。

这样修改后，当用户点击提交时，如果名字或姓氏为空，对应的输入框下方就会立刻显示红色的提示文本；验证通过后，才会正常显示名字和访问时间～

内容的提问来源于stack exchange，提问作者ben