JS正则表达式匹配手机号

最新推荐文章于 2024-08-11 15:11:23 发布

劭兮劭兮

最新推荐文章于 2024-08-11 15:11:23 发布

阅读量9.3k

点赞数 9

分类专栏：笔记 JS常用效果实现文章标签： js 正则表达式

本文链接：https://blog.csdn.net/weixin_44694201/article/details/110679310

版权

笔记同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

JS常用效果实现

4 篇文章 0 订阅

订阅专栏

JS中常用正则表达式举例一

JS正则表达式匹配手机号

大家好，有关正则表达式的基本知识在其它文章中已做了介绍：
JS属性&方法详解

下面一起来看看JS中利用正则表达式匹配字符串的常用例子：

手机号匹配

var pattern = new RegExp("^1[34578][0-9]{9}$", 'i');

规定：

（关于手机号的匹配问题，在此处只做了基础规定，实际上涉及到了中国各大运营商的分配问题，很抱歉，目前小白能力有限，不能做深入了解）

手机号的第一位数字必须为1；
手机号的第二位数字为 3 4 5 7 8 中的一个；
手机号的后九位数字均为0-9；

程序执行效果图：

（为了让效果对比明显，特意设置了三个输入文本框，进行对比）
效果对比图

代码

(小细节均在代码注释中列出，如果不合适的地方，还请指导)
下面的图对代码进行了分析，欢迎有兴趣的小伙伴可以一起探讨啊
代码讲解图

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>telephone匹配</title>
    <style>
        .default {
            border: 3px solid #a5a3a3a1;
        }
        
        .success {
            border: 3px solid #06fd3b;
        }
        
        .failure {
            border: 3px solid #fd3e04;
        }
    </style>
</head>

<body>
    <!-- 为了对比效果明显，设置了三个文本输入框 -->
    <label for="telephone">手机号码：</label>
    <input type="text" name="telephone" id="telephone" class="telephone default">
    <br/><br/>
    <label for="telephone">手机号码：</label>
    <input type="text" name="telephone" id="telephone" class="telephone default">
    <br/><br/>
    <label for="telephone">手机号码：</label>
    <input type="text" name="telephone" id="telephone" class="telephone default">

    <!-- script语句 -->
    <script>
        var telephones = document.querySelectorAll(".telephone");

        telephones.forEach(function(telephone) {
            telephone.addEventListener("keyup", function(e) {
                // 正则表达式的定义两种方式：
                // var pattern = /^1[34578][0-9]{9}$/;
                var pattern = new RegExp("^1[34578][0-9]{9}$", 'i');

                // 获取input输入框所输入的值
                var telephone = e.target.value;

                // 将规定的pattern与input输入框中所输入的值进行匹配
                if (pattern.test(telephone)) {
                    // 匹配成功，添加success样式，移去failure样式
                    if (!e.target.classList.contains("success")) {
                        e.target.classList.add("success");
                    }
                    if (e.target.classList.contains("failure")) {
                        e.target.classList.remove("failure");
                    }
                } else {
                    // 匹配不成功，添加failure样式，移去success样式
                    if (!e.target.classList.contains("failure")) {
                        e.target.classList.add("failure");
                    }
                    if (e.target.classList.contains("success")) {
                        e.target.classList.remove("success");
                    }
                }
            });
        });
    </script>
</body>

</html>