写一个具有前段验证的事件绑定,
时间: 2024-03-25 18:36:28 浏览: 19
好的,以下是一个具有前端验证的事件绑定的示例代码:
HTML 代码:
```
<form>
<label for="name">姓名:</label>
<input type="text" id="name" required>
<br>
<label for="email">邮箱:</label>
<input type="email" id="email" required>
<br>
<button type="submit" id="submitBtn">提交</button>
</form>
```
JavaScript 代码:
```
const form = document.querySelector('form');
const nameInput = document.getElementById('name');
const emailInput = document.getElementById('email');
const submitBtn = document.getElementById('submitBtn');
submitBtn.addEventListener('click', (event) => {
event.preventDefault();
if (nameInput.value.trim() === '') {
alert('请输入姓名');
return;
}
if (emailInput.value.trim() === '') {
alert('请输入邮箱');
return;
}
form.submit();
});
```
上述代码中,通过 `addEventListener` 方法将 `click` 事件绑定到提交按钮上,当用户单击提交按钮时,首先会通过 `event.preventDefault()` 方法阻止表单默认的提交行为,然后对用户输入的姓名和邮箱进行验证,如果输入为空,则弹出提示框提醒用户输入,否则通过 `form.submit()` 方法提交表单。这样,就可以在前端对用户输入进行验证,保证数据的有效性和完整性。
相关推荐
![7z](https://img-home.csdnimg.cn/images/20210720083312.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)