JavaScript 表单验证是网页开发中一种常见的技术，它允许开发者在用户提交数据到服务器之前对用户输入的数据进行检查，确保其格式正确、合法。这不仅提高了用户体验，减少了无效请求，也减轻了服务器端的处理压力。在本例中，我们将讨论如何使用 JavaScript 对电子邮件地址进行验证。
我们有一个名为 `validate_required` 的函数，用于检查表单中的必填字段。这个函数接收两个参数，`field` 是表单元素引用，`alerttxt` 是当验证失败时显示的警告信息。如果用户没有填写必填项，函数会弹出警告框并返回 `false`，表示验证失败；否则，如果字段非空，函数将返回 `true`，表示验证成功。
```javascript
function validate_required(field, alerttxt) {
with (field) {
if (value == null || value == "") {
alert(alerttxt);
return false;
} else {
return true;
}
}
}
```
接下来，我们有一个专门用于验证电子邮件地址格式的函数 `validate_email`。这个函数同样接收 `field` 和 `alerttxt` 作为参数。它通过检查输入值中 "@" 符号和最后一个 "." 点号的位置来判断输入的字符串是否符合电子邮件的格式。如果 "@" 符号不存在，或者 "@" 与第一个 "." 之间的距离小于 2，说明输入的邮件地址不合法，函数会弹出警告并返回 `false`。否则，函数返回 `true`，表示邮件地址格式正确。
```javascript
function validate_email(field, alerttxt) {
with (field) {
apos = value.indexOf("@");
dotpos = value.lastIndexOf(".");
if (apos < 1 || dotpos - apos < 2) {
alert(alerttxt);
return false;
} else {
return true;
}
}
}
```
我们创建了一个名为 `validate_form` 的函数，该函数在表单提交时被调用。它会调用 `validate_email` 函数来验证 `email` 输入字段，如果邮件地址无效，将阻止表单的提交并聚焦到 `email` 字段，以便用户可以更正错误。
```javascript
function validate_form(thisform) {
with (thisform) {
if (validate_email(email, "Not a valid e-mail address!") == false) {
email.focus();
return false;
}
}
}
```
HTML 表单部分如下：
```html
<form action="submitpage.htm" onsubmit="return validate_form(this);" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
```
在这个示例中，当用户点击“Submit”按钮时，`validate_form` 函数会被触发，检查 `email` 输入框的值。如果 `validate_email` 返回 `false`，那么表单不会被提交，否则，数据将被发送到指定的 `submitpage.htm`。
总结来说，JavaScript 表单验证是一种关键的前端技术，可以有效地提高用户体验和数据质量。在实际应用中，可以根据需求扩展验证逻辑，例如添加对电话号码、邮政编码等其他类型数据的验证。此外，还可以利用现代浏览器提供的更高级的表单验证特性，如 HTML5 的内置验证属性，以及使用正则表达式进行更复杂的模式匹配。
