当前位置：首页 > jquery

jquery正则验证

2026-03-16 11:03:00jquery

jQuery 正则验证的实现方法

在 jQuery 中，正则表达式验证通常用于表单输入验证，确保用户输入符合特定格式要求。以下是几种常见的实现方式：

使用 test() 方法进行验证

var emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
var email = "user@example.com";
if (emailRegex.test(email)) {
    // 验证通过
} else {
    // 验证失败
}

结合 jQuery 事件进行表单验证

$("#myForm").submit(function(event) {
    var username = $("#username").val();
    var usernameRegex = /^[a-zA-Z0-9_]{4,16}$/;

    if (!usernameRegex.test(username)) {
        alert("用户名必须是4-16位字母、数字或下划线");
        event.preventDefault();
    }
});

使用 jQuery Validation 插件

jQuery Validation 是一个流行的表单验证插件，支持正则表达式验证：

jquery正则验证

$("#myForm").validate({
    rules: {
        phone: {
            required: true,
            regex: /^1[3-9]\d{9}$/
        }
    },
    messages: {
        phone: {
            required: "请输入手机号",
            regex: "请输入正确的手机号码"
        }
    }
});

常用正则表达式示例

验证手机号码

/^1[3-9]\d{9}$/

验证邮箱地址

/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/

验证身份证号

jquery正则验证

/^\d{17}[\dXx]$/

验证密码强度（至少8位，包含大小写字母和数字）

/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}$/

自定义正则验证方法

可以扩展 jQuery 的验证方法，添加自定义正则验证：

$.validator.addMethod("regex", function(value, element, regexp) {
    var re = new RegExp(regexp);
    return this.optional(element) || re.test(value);
}, "格式不正确");

实时输入验证

在用户输入时实时验证，提供即时反馈：

$("#inputField").on("input", function() {
    var value = $(this).val();
    var regex = /^[A-Za-z]+$/;

    if (regex.test(value)) {
        $(this).removeClass("error").addClass("success");
    } else {
        $(this).removeClass("success").addClass("error");
    }
});