首页当用户名或密码为空，在后面提示用户名不能为空html

当用户名或密码为空，在后面提示用户名不能为空html

时间: 2025-02-15 11:16:42 浏览: 49

当用户名或密码输入框为空，并且用户尝试提交表单时，前端通常会使用HTML、JavaScript以及CSS来显示错误提示信息。例如，可以使用`<span>`标签结合`title`属性或者`placeholder`属性来显示提示消息。这里是一个简单的例子： ```html <form id="loginForm"> <label for="username">用户名：</label> <input type="text" id="username" name="username" required> <span class="error-message hidden" title="用户名不能为空">*</span><br> <label for="password">密码：</label> <input type="password" id="password" name="password" required> <span class="error-message hidden" title="密码不能为空">*</span><br> <button type="submit">登录</button> </form> <style> .error-message { color: red; display: none; } .form-invalid .error-message { display: inline-block; } </style> <script> document.getElementById("loginForm").addEventListener("submit", function(e) { if (!e.target.checkValidity()) { e.preventDefault(); var errorMessages = document.querySelectorAll('.error-message[title]'); errorMessages.forEach(function(msg) { msg.classList.remove('hidden'); }); } else { // 验证通过，去除错误消息 this.elements.username.classList.add('hidden'); this.elements.password.classList.add('hidden'); } }); </script> ``` 在这个例子中，当用户名或密码输入框失去焦点并且内容为空时，对应的`<span>`标签会显示出来，提示“用户名不能为空”或“密码不能为空”。只有在表单验证失败时才会显示这些错误消息。

阅读全文