用JavaScript实现表单验证
时间: 2023-05-25 15:03:15 浏览: 87
表单验证是Web开发中常见的需求。以下是一个简单的用JavaScript实现表单验证的例子:
HTML代码:
```
<form id="myForm">
<label for="name">姓名:</label>
<input type="text" id="name" name="name" placeholder="请输入姓名">
<span id="nameError" class="error"></span><br>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email" placeholder="请输入邮箱">
<span id="emailError" class="error"></span><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password" placeholder="请输入密码">
<span id="passwordError" class="error"></span><br>
<button type="submit">提交</button>
</form>
```
JavaScript代码:
```
// 获取表单元素
const myForm = document.getElementById("myForm");
const nameInput = document.getElementById("name");
const emailInput = document.getElementById("email");
const passwordInput = document.getElementById("password");
// 获取错误提示元素
const nameError = document.getElementById("nameError");
const emailError = document.getElementById("emailError");
const passwordError = document.getElementById("passwordError");
// 表单验证函数
function validateForm() {
let isValid = true; // 默认为true,表示表单验证通过
// 验证姓名是否为空
if (nameInput.value.trim() === "") {
nameError.innerText = "姓名不能为空";
isValid = false;
} else {
nameError.innerText = "";
}
// 验证邮箱是否合法
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(emailInput.value)) {
emailError.innerText = "邮箱格式不正确";
isValid = false;
} else {
emailError.innerText = "";
}
// 验证密码是否为空
if (passwordInput.value.trim() === "") {
passwordError.innerText = "密码不能为空";
isValid = false;
} else {
passwordError.innerText = "";
}
return isValid;
}
// 表单提交时调用表单验证函数
myForm.addEventListener("submit", function(event) {
if (!validateForm()) { // 如果表单验证不通过,阻止表单提交
event.preventDefault();
}
});
```
上述代码实现了简单的表单验证功能,包括验证姓名是否为空、验证邮箱是否合法、验证密码是否为空。在提交表单时,先调用表单验证函数判断表单是否合法,如果不合法则阻止表单提交。