修改代码让点击提交按钮时输入内容不合法时在输入框显示红色边框
时间: 2024-01-21 16:18:59 浏览: 74
假设你的提交按钮是一个 `button` 元素,输入框是一个 `input` 元素,可以通过以下代码实现输入内容不合法时在输入框显示红色边框:
```html
<input id="myInput" type="text">
<button id="submitBtn">提交</button>
<script>
const inputEl = document.getElementById('myInput');
const submitBtnEl = document.getElementById('submitBtn');
submitBtnEl.addEventListener('click', () => {
const inputValue = inputEl.value;
if (inputValue.trim().length === 0) { // 检查输入是否为空或者纯空格
inputEl.style.border = '1px solid red'; // 设置红色边框
} else {
// 如果输入合法,清除红色边框
inputEl.style.border = 'none';
// TODO: 提交表单或执行其他操作
}
});
</script>
```
这段代码首先获取了输入框和提交按钮的元素,并为提交按钮添加了一个 `click` 事件监听器。当用户点击按钮时,会获取输入框的值,并检查其是否为空或者纯空格。如果输入不合法,就设置输入框的红色边框;否则,清除红色边框并执行提交操作。
阅读全文