JS正则表达式匹配手机号

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>

代码还有优化之处,欢迎小伙伴一起探讨学习,也欢迎大佬指导教学!

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页