输入框手机号码自动格式化

最新推荐文章于 2024-04-15 09:51:00 发布

whycxl

最新推荐文章于 2024-04-15 09:51:00 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

文章标签： js 手机号格式化

本文链接：https://blog.youkuaiyun.com/whycxl/article/details/103009979

本文介绍了一种高效且优雅的手机号格式化方法，通过监听输入框失焦和国家区号变化事件，结合正则表达式和字符串操作，实现手机号自动转换为特定格式。此方法避免了复杂的DOM操作，代码简洁且易于维护。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

领导一直要求注册时用户输入手机号自动格式化为（xxx）xxx-xxxx的格式

之前自己想的一直是在用户失焦的时候在第一位前，第三位后，第六位后加入对应的括号，中划线，但是，这种方法太笨了，如果用户自己输入了括号呢，如果用户输完又删除了呢，如果用户......

之后为了实现这种效果，写了三个隐形的input框，分为三段，格式固定死，在外层套一个div,给用户造成一个输入框的假象，以至于虽然实现了功能，但总觉得方法笨拙，代码不够简洁

后来，无意间看了某注册网站也有类似的功能，于是膜拜了一下大佬的代码，简直醍醐灌顶

大佬的思维真的是简单又让我想不到，解决了很多我的解决方案中的潜在bug

额，思维方式太重要了，能够想出一个好的解决方案，不仅省时省力省代码，重要的是省bug,哈哈哈

于是就简单写了一下这个功能，只是实现了我的需求，主要分享给大家这个解决方案的思维，当然我的代码与大佬的代码依然相差甚远

学海无涯，继续加油

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>phoneFormat</title>
</head>
<style>
    #phoneNumberBox {
        border-bottom: 1px solid #ccc;
        display: inline;
    }

    #countryCode {
        border: none;
    }

    #phoneNumber {
        border: none;

    }
</style>

<body>
    <div id="phoneNumberBox">
        <select name="" id="countryCode">
            <option value="+1" data-format="(xxx) xxx-xxxx" data-length="10">+1</option>
            <option value="+86" data-format="(xxx) xxxx-xxxx" data-length="11">+86</option>
        </select>
        <input id="phoneNumber" placeholder="请输入电话号码" />
    </div>

</body>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

<script>
    var phoneNumDom = $("#phoneNumber");
    //手机号码输入框失焦
    phoneNumDom.on("blur", function () {
        if (phoneNumDom.val()) {
            phoneFormat();
        }
    })
    //国家码change事件
    $("#countryCode").on("change", function () {
        if (phoneNumDom.val()) {
            phoneFormat();
        }
    })

    function phoneFormat() {
        //1、获取地区和电话号码
        var phoneNum = phoneNumDom.val();
        var selectCountryDom = $("#countryCode option:selected");
        var selectCountryCode = selectCountryDom.val();
        var phoneFormat= selectCountryDom.attr("data-format");
        var phoneNumLength = selectCountryDom.attr("data-length");
        //2、处理电话号码为纯数字
        var notPhoneNumReg = /\D/g; //\D 查找非数字字符
        var n = phoneNum.replace(notPhoneNumReg, "");
        //3、获取地区对应的格式，用数字代替
        var l, p = n.split("");
        if (p.length && p.length <= phoneNumLength) {
            var v = -1;
            phoneFormat= phoneFormat.replace(/x/g, function (e) {
                return v += 1,
                    p[v] || e
            })
            l = phoneFormat.split("x")[0],
                n = l || n;
            phoneNumDom.val(n);
        } else {
            //输入的手机号码不合法
            phoneNumDom.val(n);
            alert("请正确输入")
        }
    }
</script>

</html>