自行了解submit函数编写简单例子实现form表单验证
时间: 2024-02-22 08:56:26 浏览: 86
简单实用表单验证实例
好的,这里是一个简单的例子,实现了表单验证并使用了`submit`函数:
```html
<!DOCTYPE html>
<html>
<head>
<title>表单验证</title>
</head>
<body>
<form id="myForm">
<label for="name">姓名:</label>
<input type="text" id="name" name="name" required>
<br>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email" required>
<br>
<label for="password">密码:</label>
<input type="password" id="password" name="password" required>
<br>
<input type="submit" value="提交">
</form>
<script>
function validateForm(event) {
event.preventDefault(); // 阻止表单默认提交行为
// 获取表单元素
const form = document.getElementById("myForm");
const nameInput = document.getElementById("name");
const emailInput = document.getElementById("email");
const passwordInput = document.getElementById("password");
// 验证表单
if (nameInput.value === "") {
alert("请输入姓名");
nameInput.focus();
return false;
}
if (emailInput.value === "") {
alert("请输入邮箱");
emailInput.focus();
return false;
}
if (passwordInput.value === "") {
alert("请输入密码");
passwordInput.focus();
return false;
}
// 表单验证通过,使用submit函数提交表单
form.submit();
}
// 绑定表单的submit事件
const form = document.getElementById("myForm");
form.addEventListener("submit", validateForm);
</script>
</body>
</html>
```
在这个例子中,我们使用了`submit`函数来提交表单,并使用`preventDefault`函数阻止了表单默认的提交行为。在表单提交之前,我们通过JS代码对表单进行验证,确保输入的内容符合要求。如果验证不通过,则弹出提示并让用户重新输入;如果验证通过,则使用`submit`函数提交表单。
阅读全文