HTML 表单验证：姓名、邮箱和留言
<!DOCTYPE html>
<html>
<head>
<title>表单验证 - 姓名、邮箱和留言</title>
<script>
function validateForm() {
var name = document.forms["myForm"]["name"].value;
var email = document.forms["myForm"]["email"].value;
var message = document.forms["myForm"]["message"].value;
<pre><code> if (name == "") {
alert('姓名不能为空');
return false;
}
if (email == "") {
alert('邮箱不能为空');
return false;
}
if (message == "") {
alert('留言不能为空');
return false;
}
}
</code></pre>
</script>
</head>
<body>
<h2>留言板</h2>
<form name="myForm" onsubmit="return validateForm()" method="post">
<label for="name">姓名：</label>
<input type="text" id="name" name="name"><br>
<pre><code><label for="email">邮箱：</label>
<input type="email" id="email" name="email"><br>
<label for="message">留言：</label>
<textarea id="message" name="message"></textarea><br>
<input type="submit" value="提交">
</code></pre>
</form>
<p>本示例代码演示了如何使用 JavaScript 的 <code>validateForm</code> 函数验证表单。该函数检查姓名、邮箱和留言字段是否为空。如果为空，则使用 <code>alert</code> 函数显示相应的错误消息，并返回 <code>false</code> 以阻止表单提交。</p>
<p>请注意，这只是一个简单的前端验证，仅验证是否为空。在实际开发中，可能需要更严格的验证，比如验证邮箱格式是否正确、留言的长度限制等。</p>
</body>
</html>
原文地址: http://www.cveoy.top/t/topic/ZRc 著作权归作者所有。请勿转载和采集!