当前位置：首页 > jquery

jquery正则表达式验证

2026-03-16 16:50:43jquery

jQuery 正则表达式验证方法

使用 jQuery 结合正则表达式进行表单验证是一种常见的前端验证方式。以下是一些常用的验证方法和示例代码。

基本验证示例

使用 test() 方法结合正则表达式验证输入内容是否符合预期格式。

// 验证邮箱格式
var emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
var email = $("#email").val();
if (!emailRegex.test(email)) {
    alert("请输入有效的邮箱地址");
    return false;
}

动态绑定验证事件

通过事件绑定实时验证输入内容。

$("#inputField").on("input", function() {
    var regex = /^[A-Za-z]+$/; // 仅允许字母
    if (!regex.test($(this).val())) {
        $(this).css("border-color", "red");
    } else {
        $(this).css("border-color", "green");
    }
});

常用正则表达式

以下是一些常见的正则表达式示例，可直接用于验证。

验证手机号码

var phoneRegex = /^1[3-9]\d{9}$/;

验证身份证号

var idCardRegex = /^\d{17}[\dXx]$/;

验证密码强度

// 至少8位，包含大小写字母和数字
var passwordRegex = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}$/;

表单提交时验证

在表单提交时对所有字段进行验证，确保数据符合要求。

$("#myForm").submit(function(e) {
    e.preventDefault();
    var isValid = true;

    // 验证用户名（仅字母和数字）
    var usernameRegex = /^[A-Za-z0-9]+$/;
    if (!usernameRegex.test($("#username").val())) {
        isValid = false;
        $("#username").css("border-color", "red");
    }

    // 验证手机号
    var phoneRegex = /^1[3-9]\d{9}$/;
    if (!phoneRegex.test($("#phone").val())) {
        isValid = false;
        $("#phone").css("border-color", "red");
    }

    if (isValid) {
        this.submit();
    }
});

自定义验证方法

通过扩展 jQuery 的验证方法，实现更灵活的验证逻辑。

$.validator.addMethod("customPhone", function(value, element) {
    return /^1[3-9]\d{9}$/.test(value);
}, "请输入有效的手机号码");

// 使用自定义验证方法
$("#myForm").validate({
    rules: {
        phone: {
            required: true,
            customPhone: true
        }
    }
});

提示信息优化

结合 Bootstrap 或其他 UI 框架，优化验证提示信息的显示方式。

jquery正则表达式验证

$("#inputField").on("blur", function() {
    var regex = /^[A-Za-z]+$/;
    if (!regex.test($(this).val())) {
        $(this).next(".error-message").text("请输入字母").show();
    } else {
        $(this).next(".error-message").hide();
    }
});

通过以上方法，可以灵活地实现各种表单验证需求，确保用户输入的数据符合预期格式。