如何用jQuery实现表单验证？代码优化及插件选择咨询

算力阿峰

2026-6-13

jQuery表单验证问题与最佳实践指导

我正尝试使用jQuery实现表单验证，但不确定如何正确实现必填字段、邮箱格式及其他约束的校验。以下是我当前的HTML表单：

<form id="myForm">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    
    <label for="email">Email:</label>
    <input type="text" id="email" name="email">
    
    <button type="submit">Submit</button>
</form>

以及目前的jQuery代码：

$(document).ready(function () {
    $("#myForm").submit(function (event) {
        var name = $("#name").val();
        var email = $("#email").val();
        
        if (name.trim() === "") {
            alert("Name is required");
            event.preventDefault();
        }
        
        var emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!emailPattern.test(email)) {
            alert("Invalid email address");
            event.preventDefault();
        }
    });
});

虽然这段代码似乎能运行，但我有以下疑问：

这是使用jQuery进行表单验证的最佳方式吗？
有没有办法优化代码以避免重复调用event.preventDefault()？
我是否应该考虑使用jQuery Validation Plugin？

问题解答与最佳实践

1. 这是使用jQuery进行表单验证的最佳方式吗？

这不是最理想的实现方式，你的代码能完成基础校验，但存在明显的体验和扩展性问题：

用alert提示错误的用户体验差，用户需要关闭弹窗才能继续操作，且无法同时看到多个错误
代码耦合度高，新增字段时需要手动添加校验逻辑，不利于维护
没有处理错误信息的持久化（比如提交后错误提示保留，方便用户修正）

2. 有没有办法优化代码以避免重复调用event.preventDefault()？

当然可以，核心思路是用一个变量跟踪整体校验状态，仅在校验不通过时统一阻止表单提交，同时优化错误提示的展示方式：

$(document).ready(function () {
    $("#myForm").submit(function (event) {
        let isValid = true;
        const name = $("#name").val().trim();
        const email = $("#email").val().trim();
        
        // 清空之前的错误提示，避免重复显示
        $(this).find('.error-message').remove();

        // 校验必填姓名
        if (name === "") {
            $("#name").after('<span class="error-message" style="color: red; margin-left: 8px;">Name is required</span>');
            isValid = false;
        }
        
        // 校验邮箱格式
        const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!emailPattern.test(email)) {
            $("#email").after('<span class="error-message" style="color: red; margin-left: 8px;">Invalid email address</span>');
            isValid = false;
        }
        
        // 仅在校验失败时阻止提交
        if (!isValid) {
            event.preventDefault();
        }
    });
});

这种方式不仅避免了重复调用event.preventDefault()，还把错误提示放在对应字段旁边，用户体验更友好。

3. 我是否应该考虑使用jQuery Validation Plugin？

如果你的表单涉及较多字段、复杂校验规则（如远程校验、自定义规则），或者需要长期维护，非常推荐使用jQuery Validation Plugin：

内置了数十种常用校验规则（必填、邮箱、数字、URL等），无需手动编写正则
支持自定义校验规则和错误提示文案
自动处理错误信息的展示与隐藏，无需手动操作DOM
支持实时校验（用户输入时即时提示错误，而非仅提交时）
代码更简洁，扩展性更强

用该插件实现你的表单校验示例：

<form id="myForm">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    
    <label for="email">Email:</label>
    <input type="text" id="email" name="email">
    
    <button type="submit">Submit</button>
</form>

$(document).ready(function() {
    $("#myForm").validate({
        rules: {
            name: "required",
            email: {
                required: true,
                email: true
            }
        },
        messages: {
            name: "Name is required",
            email: "Please enter a valid email address"
        },
        errorPlacement: function(error, element) {
            // 自定义错误提示位置
            error.insertAfter(element);
        }
    });
});

总结最佳实践

简单表单：可以自行编写轻量校验逻辑，用状态变量管理校验结果，优先在字段旁展示错误提示
复杂表单：优先使用jQuery Validation Plugin，减少重复代码，提升开发效率与可维护性
用户体验优先：避免使用alert，错误提示要清晰、位置合理，支持实时反馈
结合HTML5原生校验：可以用required、type="email"等属性作为基础校验，再用JS增强交互体验

内容的提问来源于stack exchange，提问作者Mạnh Nguyễn Thiết