input text的电话号码分割js(如：151-9456-7894)

最新推荐文章于 2024-06-21 19:49:41 发布

HelloMeph

最新推荐文章于 2024-06-21 19:49:41 发布

阅读量3.3k

点赞数

分类专栏： Web前端文章标签： jquery js 电话号码分割

本文链接：https://blog.youkuaiyun.com/hellomephllw/article/details/20136303

版权

Web前端专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的电话号码输入自动格式化的方法。该方法能够根据输入的内容实时将手机号或座机号格式化为标准形式，并进行基本的格式验证。

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

------------------------------------ 题记

由于项目经理的要求，必须把电话号码完成分割，在网上又没查询到相应的代码，于是就自己写了一个电话号码的分割和验证。

若要封装成方法，把$("#phone").keyup();中的"#phone"变成传参即可。

------------------------------------ 代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>测试</title>
</head>
<script type="text/javascript" src="jquery-1.8.2.js"></script>
<script type="text/javascript">
    $(function() {
        $("#phone").keyup(function() {
            var phoneNum = $(this).val();
            //数字和长度验证
            if (!/^[\d|-]*$/.test(phoneNum) || phoneNum.length > 15) {
                $(this).val(phoneNum.substring(0, phoneNum.length - 1));
            }
            //手机分割
            var checkPhoneNum = /^1[3|4|5|8][0-9]\d+$/;
            if (checkPhoneNum.test(phoneNum) && phoneNum.length == 4) {
                $("#phone").val(phoneNum.substring(0, 3) + "-" +phoneNum.substring(3, phoneNum.length));
                return ;
            }
            checkPhoneNum = /^1[3|4|5|8][0-9]-\d{5}$/;
            if (checkPhoneNum.test(phoneNum) && phoneNum.length == 9) {
                $("#phone").val(phoneNum.substring(0, 8) + "-" + phoneNum.substring(8, phoneNum.length));
                return ;
            }
            checkPhoneNum = /^1[3|4|5|8][0-9]-\d{4}-\d{5}$/;
            if (checkPhoneNum.test(phoneNum) && phoneNum.length == 14) {
                $("#phone").val(phoneNum.replace(/-/g, ''));
                return ;
            }
            //座机分割
            checkPhoneNum = /^0[1|2]\d{2}$/;
            if (checkPhoneNum.test(phoneNum) && phoneNum.length == 4) {
                $("#phone").val(phoneNum.substring(0, 3) + "-" +phoneNum.substring(3, phoneNum.length));
                return ;
            }
            checkPhoneNum = /^0[1|2]\d-\d{9}$/;
            if (checkPhoneNum.test(phoneNum) && phoneNum.length == 13) {
                $("#phone").val(phoneNum.replace(/-/g, ''));
                return ;
            }
            checkPhoneNum = /^0[3|4|5|6|7|8|9]\d{3}$/;
            if (checkPhoneNum.test(phoneNum) && phoneNum.length == 5) {
                $("#phone").val(phoneNum.substring(0, 4) + "-" +phoneNum.substring(4, phoneNum.length));
                return ;
            }
            checkPhoneNum = /^0[3|4|5|6|7|8|9]\d{2}-\d{9}$/;
            if (checkPhoneNum.test(phoneNum) && phoneNum.length == 14) {
                $("#phone").val(phoneNum.replace(/-/g, ''));
            }
        });
        $("#click").click(function() {
            var mobile = $("#phone").val();
            alert(mobile.length);
            if(!(/^1[3|4|5|8][0-9]-\d{4}-\d{5}$/.test(mobile))) {
                alert("格式不正确！");
            }
        });
    });
</script>
<body>
<input id="phone" type="text" />
<input id="click" type="button" value="click" />
<span id="show"></span>
</body>
</html>