jquery正则验证手机号码

jQuery 正则验证手机号码

使用 jQuery 结合正则表达式可以方便地验证手机号码格式是否符合要求。以下是一个完整的实现方法：

HTML 结构

<input type="text" id="phone" placeholder="请输入手机号码">
<button id="validate">验证</button>
<div id="result"></div>

jQuery 代码

$(document).ready(function() {
    $('#validate').click(function() {
        var phone = $('#phone').val();
        var reg = /^1[3-9]\d{9}$/;

        if (reg.test(phone)) {
            $('#result').text('手机号码格式正确').css('color', 'green');
        } else {
            $('#result').text('手机号码格式错误').css('color', 'red');
        }
    });
});

实时验证版本

$('#phone').on('input', function() {
    var reg = /^1[3-9]\d{9}$/;
    if (reg.test($(this).val())) {
        $(this).css('border-color', 'green');
    } else {
        $(this).css('border-color', 'red');
    }
});

正则表达式说明

• ^1：以数字1开头
• [3-9]：第二位是3-9之间的数字
• \d{9}$：后面跟着9位数字，总共11位
• /^...$/：确保从开始到结束完全匹配

扩展验证（包含国际号码）

var internationalReg = /^(?:\+?86)?1[3-9]\d{9}$/;
// 可匹配 +8613912345678 或 8613912345678 格式

表单提交时验证

$('form').submit(function(e) {
    if (!/^1[3-9]\d{9}$/.test($('#phone').val())) {
        e.preventDefault();
        alert('请输入正确的手机号码');
    }
});

这些方法可以根据实际需求选择使用，实时验证能提升用户体验，而提交验证能确保数据有效性。正则表达式可根据具体业务需求调整，例如需要验证特定运营商号段时，可以修改第二位数字的范围。