jquery正则表达式手机号码验证码

admin 2026年02月16日 15:43 102 0

使用jQuery结合正则表达式可实现手机号码与验证码的高效表单验证，通过选择器获取输入值，手机号正则通常匹配11位数字（如/^1[3-9]\d{9}$/），验证码则匹配4-6位数字或字母（如/^\d{4,6}$/或/^[A-Za-z0-9]{4,6}$/），绑定blur事件实时校验，匹配成功时显示正确提示，失败则提示格式错误，有效提升表单交互体验与数据准确性。

jQuery结合正则表达式：手机号码与验证码前端验证实践

在Web开发中，表单验证是提升用户体验和保障数据质量的关键环节，手机号码和验证码的验证因涉及用户身份核验和信息安全，显得尤为重要，本文将详细介绍如何结合jQuery与正则表达式，高效实现手机号码格式验证和验证码规则校验,并通过完整的代码示例展示具体实践步骤。

手机号码验证：正则表达式匹配格式

手机号码格式规范

中国大陆手机号码通常为11位数字,且需满足以下规则：

必须以1开头；
第二位为3-9的数字（对应不同运营商号段）；
其余位为0-9的任意数字。

正则表达式可写为：/^1[3-9]\d{9}$/,各部分含义如下：

^ 表示字符串开始；
1 固定开头数字；
[3-9] 匹配第二位数字范围；
\d{9} 匹配后续9位任意数字；
表示字符串结束。

jQuery实现手机号验证

通过jQuery监听输入框的blur（失焦）事件，触发验证逻辑,并根据结果显示错误提示：

<!-- 手机号输入框 -->
<input type="tel" id="phoneInput" placeholder="请输入手机号">
<span id="phoneError" style="color: red; display: none;">手机号格式不正确</span>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    // 手机号验证正则
    const phoneRegex = /^1[3-9]\d{9}$/;
    // 监听手机号输入框失焦事件
    $('#phoneInput').blur(function() {
        const phoneValue = $(this).val().trim();
        const $errorTip = $('#phoneError');
        if (!phoneRegex.test(phoneValue)) {
            $errorTip.show(); // 显示错误提示
            $(this).css('border-color', 'red'); // 输入框边框变红
        } else {
            $errorTip.hide(); // 隐藏错误提示
            $(this).css('border-color', '#ccc'); // 恢复默认边框
        }
    });
});
</script>

优化：实时验证与空值处理

除了失焦验证，还可结合input事件实现实时验证（需注意防抖，避免频繁触发）,并增加空值校验：

// 防抖函数（避免频繁触发）
function debounce(func, wait) {
    let timeout;
    return function() {
        const context = this, args = arguments;
        clearTimeout(timeout);
        timeout = setTimeout(() => func.apply(context, args), wait);
    };
}
$(document).ready(function() {
    const phoneRegex = /^1[3-9]\d{9}$/;
    const $phoneInput = $('#phoneInput');
    const $errorTip = $('#phoneError');
    // 实时验证（防抖500ms）
    $phoneInput.on('input', debounce(function() {
        const phoneValue = $(this).val().trim();
        if (phoneValue === '') {
            $errorTip.hide().text('手机号不能为空').show();
            $(this).css('border-color', 'red');
        } else if (!phoneRegex.test(phoneValue)) {
            $errorTip.show().text('手机号格式不正确');
            $(this).css('border-color', 'red');
        } else {
            $errorTip.hide();
            $(this).css('border-color', 'green');
        }
    }, 500));
});

最佳实践建议：

在实际项目中，建议将验证逻辑封装成独立函数，提高代码复用性
可以考虑添加输入格式化功能，如自动添加空格或分隔符
对于复杂的表单，建议使用统一的验证框架，如jQuery Validation Plugin

验证码验证：规则校验与交互优化

验证码格式规范

常见的短信验证码通常为4-6位数字（部分场景包含字母，此处以数字为例），正则表达式为：/^\d{4,6}$/，若需区分大小写字母，可修改为：/^[a-zA-Z0-9]{4,6}$/。

jQuery实现验证码验证

结合手机号验证，增加验证码输入框的blur事件校验，并模拟"获取验证码"按钮的倒计时功能：

<!-- 验证码输入框 -->
<input type="text" id="codeInput" placeholder="请输入验证码">
<span id="codeError" style="color: red; display: none;">验证码为4-6位数字</span>
<button id="getCodeBtn">获取验证码</button>
<script>
$(document).ready(function() {
    const codeRegex = /^\d{4,6}$/;
    const $codeInput = $('#codeInput');
    const $codeError = $('#codeError');
    const $getCodeBtn = $('#getCodeBtn');
    // 验证码失焦验证
    $codeInput.blur(function() {
        const codeValue = $(this).val().trim();
        if (!codeRegex.test(codeValue)) {
            $codeError.show().text('验证码为4-6位数字');
            $(this).css('border-color', 'red');
        } else {
            $codeError.hide();
            $(this).css('border-color', 'green');
        }
    });
    // 获取验证码按钮点击事件
    $getCodeBtn.click(function() {
        const phoneValue = $('#phoneInput').val().trim();
        if (!phoneRegex.test(phoneValue)) {
            alert('请先输入正确的手机号码');
            return;
        }
        // 模拟发送验证码
        $(this).prop('disabled', true);
        let countdown = 60;
        const timer = setInterval(function() {
            $getCodeBtn.text(countdown + '秒后重试');
            countdown--;
            if (countdown < 0) {
                clearInterval(timer);
                $getCodeBtn.prop('disabled', false).text('获取验证码');
            }
        }, 1000);
        // 这里可以添加实际的AJAX请求发送验证码
        console.log('发送验证码到：' + phoneValue);
    });
});
</script>

高级验证：综合表单验证与提交

在实际应用中，通常需要综合验证多个字段,以下是一个完整的表单验证示例：

<form id="verificationForm">
    <div class="form-group">
        <input type="tel" id="phoneInput" placeholder="请输入手机号">
        <span id="phoneError" class="error-message">手机号格式不正确</span>
    </div>
    <div class="form-group">
        <input type="text" id="codeInput" placeholder="请输入验证码">
        <span id="codeError" class="error-message">验证码为4-6位数字</span>
    </div>
    <button type="submit" id="submitBtn">提交</button>
</form>
<style>
.error-message {
    color: red;
    display: none;
    font-size: 12px;
    margin-top: 5px;
}
input.error {
    border-color: red;
}
input.success {
    border-color: green;
}
</style>
<script>
$(document).ready(function() {
    // 正则表达式定义
    const phoneRegex = /^1[3-9]\d{9}$/;
    const codeRegex = /^\d{4,6}$/;
    // 表单元素
    const $form = $('#verificationForm');
    const $phoneInput = $('#phoneInput');
    const $codeInput = $('#codeInput');
    const $phoneError = $('#phoneError');
    const $codeError = $('#codeError');
    const $getCodeBtn = $('#getCodeBtn');
    // 验证函数
    function validatePhone() {
        const phoneValue = $phoneInput.val().trim();
        if (!phoneRegex.test(phoneValue)) {
            $phoneError.show().text('手机号格式不正确');
            $phoneInput.addClass('error').removeClass('success');
            return false;
        } else {

标签： #正则表达式 #手机号码