修改代码让点击提交按钮时输入内容不合法时在输入框下方显示提示信息
时间: 2024-01-21 18:18:43 浏览: 32
假设你的输入框的id是"input-box",提交按钮的id是"submit-btn",你可以添加一个空的span标签作为提示信息的容器,如下所示:
```
<input type="text" id="input-box">
<span id="error-message"></span>
<button id="submit-btn">提交</button>
```
然后,你可以使用JavaScript来监听提交按钮的点击事件,在点击事件中检查输入框的内容是否合法。如果不合法,将错误信息显示在提示信息的容器中。
```
const inputBox = document.getElementById('input-box');
const errorMessage = document.getElementById('error-message');
const submitBtn = document.getElementById('submit-btn');
submitBtn.addEventListener('click', () => {
const inputValue = inputBox.value;
// 检查输入框的内容是否合法
if (inputValue.trim() === '') {
errorMessage.textContent = '输入内容不能为空';
} else if (inputValue.length < 5) {
errorMessage.textContent = '输入内容长度不能小于5';
} else {
// 输入内容合法,清空错误信息
errorMessage.textContent = '';
// 在这里添加提交表单的代码
}
});
```
上述代码会在点击提交按钮时检查输入框的内容是否合法,并将错误信息显示在提示信息的容器中。如果输入内容合法,则清空错误信息,并执行提交表单的代码。