首页创建一个网页，页面有个输入框和提交按钮，用户在输入框中输入内容并点击按钮，提示页面显示用户的输入内容；如果用户输入值为空号，则提示内容不能为空

创建一个网页，页面有个输入框和提交按钮，用户在输入框中输入内容并点击按钮，提示页面显示用户的输入内容；如果用户输入值为空号，则提示内容不能为空

时间: 2024-09-26 22:07:21 浏览: 38

创建一个简单的HTML页面，可以使用JavaScript处理用户输入和验证。这是一个基础的示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>简单输入验证</title> <style> .error-message { color: red; } </style> </head> <body> <form id="myForm"> <label for="inputField">请输入内容:</label> <input type="text" id="inputField" required> <span class="error-message hidden" id="errorMessage"></span><br> <button type="submit">提交</button> </form> <script> document.getElementById("myForm").addEventListener("submit", function (event) { event.preventDefault(); // 阻止表单默认提交 const inputField = document.getElementById("inputField"); const errorMessage = document.getElementById("errorMessage"); if (!inputField.value) { // 检查输入是否为空 errorMessage.textContent = "内容不能为空"; errorMessage.classList.remove("hidden"); // 显示错误信息 } else { errorMessage.textContent = ""; // 清除错误信息 errorMessage.classList.add("hidden"); // 隐藏错误信息 alert("您输入的内容是：" + inputField.value); // 提示显示用户输入 } }); </script> </body> </html> ``` 在这个例子中，当用户点击提交按钮时，会阻止表单的默认提交行为。然后检查输入字段是否有值，如果没有值就显示错误消息，并禁止继续提交。如果有值，清除错误消息并弹出确认框显示用户输入。

阅读全文