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>
代码还有优化之处，欢迎小伙伴一起探讨学习，也欢迎大佬指导教学！