<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单验证示例</title>
<style>
.error-message {
color: red;
}
</style>
</head>
<body>
<h2>表单验证示例</h2>
<form id="myForm" onsubmit="return validateForm()">
<label for="name">姓名:</label>
<input type="text" id="name" name="name" required>
<span id="nameError" class="error-message"></span>
<br>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email" required>
<span id="emailError" class="error-message"></span>
<br>
<label for="password">密码:</label>
<input type="password" id="password" name="password" required>
<span id="passwordError" class="error-message"></span>
<br>
<input type="submit" value="提交">
</form>
<script>
function validateForm() {
// 获取表单中的输入值
var name = document.getElementById('name').value;
var email = document.getElementById('email').value;
var password = document.getElementById('password').value;
// 进行简单的验证，例如检查姓名是否为空
if (name === '') {
document.getElementById('nameError').innerText = '请输入姓名';
return false; // 阻止表单提交
} else {
document.getElementById('nameError').innerText = '';
}
// 邮箱验证
var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(email)) {
document.getElementById('emailError').innerText = '请输入有效的邮箱地址';
return false;
} else {
document.getElementById('emailError').innerText = '';
}
// 密码长度验证
if (password.length < 6) {
document.getElementById('passwordError').innerText = '密码长度至少为6个字符';
return false;
} else {
document.getElementById('passwordError').innerText = '';
}
// 如果通过验证，可以继续提交表单
return true;
}
</script>
</body>
</html>
这是一个简单的 HTML 表单，包含姓名、邮箱和密码字段。JavaScript 部分包括一个 validateForm 函数，该函数在表单提交时触发。在该函数中，我们获取表单中的输入值，并进行一些基本的验证，例如检查姓名是否为空、验证邮箱格式是否正确，以及检查密码长度是否符合要求。如果验证不通过，会在页面上显示相应的错误消息，并阻止表单提交。如果通过验证，表单将被提交。请注意，这只是一个简单的示例，实际应用中可能需要更复杂的验证逻辑。
转载请注明出处：http://www.pingtaimeng.com/article/detail/3535/JavaScript