表单验证javaScript代码实现案例
时间: 2023-09-24 20:09:43 浏览: 142
javascript表单验证例子
4星 · 用户满意度95%
我可以回答你的问题,以下是一个表单验证的 JavaScript 代码实现案例:
HTML 代码:
```
<form id="myForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
<button type="submit">Submit</button>
</form>
```
JavaScript 代码:
```
const form = document.getElementById('myForm');
const nameInput = document.getElementById('name');
const emailInput = document.getElementById('email');
const passwordInput = document.getElementById('password');
form.addEventListener('submit', (event) => {
event.preventDefault(); // 阻止默认表单提交行为
if (nameInput.value === '') {
alert('Please enter your name');
} else if (emailInput.value === '') {
alert('Please enter your email');
} else if (passwordInput.value === '') {
alert('Please enter your password');
} else {
alert('Form submitted successfully');
form.reset(); // 重置表单
}
});
```
这个代码实现了一个简单的表单验证,当用户点击提交按钮时,如果表单未填写完成,则会弹出提示框,让用户填写完整。如果表单填写完成,则会弹出提交成功的提示框,并清空表单。
阅读全文