JavaScript 表单验证：邮箱校验与必填项检查示例

常见表单验证目标

在前端开发中，典型的 JavaScript 表单验证通常涵盖以下几个关键数据点：

• 必填项检查：确认用户是否已填写表单中的必需项目，防止提交空白数据。
• 邮箱地址合法性：验证输入的字符串是否符合电子邮件地址的基本语法规则。
• 日期格式：检查用户输入的是否为合法的日期格式。
• 数据类型：确保在数字域（numeric field）中输入的不是文本字符。

第一步：实现必填项验证

首先，我们需要一个通用的函数来检查用户是否已填写特定的表单项。该函数的逻辑非常直接：如果指定字段的值为 null 或空字符串 ""，则弹出警告提示并返回 false；否则返回 true，表示数据有效。

第1步：定义校验函数参数与逻辑

创建名为 validate_required 的函数，接收两个参数：field（待验证的 DOM 元素对象）和 alerttxt（当验证失败时弹出的提示信息）。

function validate_required(field, alerttxt) {
    with (field) {
        if (value == null || value == "") {
            alert(alerttxt);
            return false;
        } else {
            return true;
        }
    }
}

完成判断：调用此函数后，若字段为空，浏览器会弹窗显示 alerttxt，且页面提交被阻断。

第二步：实现基础邮箱验证

邮箱验证通常不需要过于复杂的正则表达式，最基本的语法要求是：必须包含 @ 符号和点号 (.)。@ 不能是首字符，且在 @ 之后必须至少还有一个点号。

第2步：编写邮箱格式检查函数

使用 indexOf 和 lastIndexOf 方法来定位字符位置，从而判断格式是否正确。

function validate_email(field, alerttxt) {
    with (field) {
        apos = value.indexOf("@");
        dotpos = value.lastIndexOf(".");
        // @ 必须在第二个位置之后 (apos < 1 表示 @ 在第一个或不存在)
        // 最后一个点号必须在 @ 之后至少隔一个字符 (dotpos - apos < 2)
        if (apos < 1 || dotpos - apos < 2) {
            alert(alerttxt);
            return false;
        } else {
            return true;
        }
    }
}

注意：这种简单的检查仅覆盖了邮箱的最基本结构，对于生产环境，建议使用更严谨的正则表达式（如 /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/）。

第三步：集成表单提交逻辑

为了让上述验证生效，需要将其嵌入到 HTML 表单中。通过在 <form> 标签上添加 onsubmit 属性，可以在提交动作发生前触发总控函数。

第3步：构建完整测试页面

以下是一个完整的 HTML 示例，包含了前面的验证函数、一个简单的输入框以及触发验证的提交按钮。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>JS 邮箱验证示例</title>
    <script type="text/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;
                }
            }
        }

        function validate_form(thisform) {
            with (thisform) {
                // 验证 email 字段
                if (validate_email(email, "Not a valid e-mail address!") == false) {
                    email.focus(); // 将焦点集中在错误的输入框
                    return false;
                }
            }
            return true; // 所有检查通过，允许提交
        }
    </script>
</head>
<body>
    <form action="submitpage.htm" onsubmit="return validate_form(this);" method="post">
        Email: <input type="text" name="email" size="30"><br>
        <input type="submit" value="Submit">
    </form>
</body>
</html>

操作说明：

1. 用户在 name="email" 的输入框中尝试提交空值或非邮箱格式的内容。
2. 触发 onsubmit 事件，执行 validate_form 函数。
3. 若校验失败，email.focus() 自动将光标移回输入框，方便用户修改。
4. 若校验成功，表单正常发送至 submitpage.htm。

总结

通过封装 validate_required 和 validate_email 等小型功能函数，并利用 with 语句简化对 DOM 元素的访问，我们可以以极低的代码成本实现基础的客户端数据清洗。虽然现代开发中常借助 React/Vue 框架或强大的正则库，但理解这些底层 DOM 操作与事件绑定的原理，对于排查表单异常和优化加载性能依然至关重要。

以上就是 JavaScript 表单验证与邮箱校验的基础实现详细内容，更多关于 JavaScript 前端技巧的资料请关注本站其它相关文章！