JavaScript实现手机号格式校验与登录拦截
本文介绍如何使用JavaScript结合正则表达式对手机号进行格式校验。通过定义匹配特定号段的正则规则,在登录按钮点击事件中拦截无效输入,防止页面跳转。代码示例展示了如何获取输入值、执行test方法判断合法性,并给出相应的提示或继续回调,适用于前端表单提交前的基础数据清洗。
JavaScript手机号校验实现
以下是实现JavaScript判断手机号有效性并返回处理结果的代码示例:
<form method="post" action="login.php" onsubmit="return abc()">
<input type="text" id="phone" />
<input type="submit" value="登录"/> </form>
<script type="text/javascript">
function abc() {
var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
if(!myreg.test($("#phone").val()))
{
alert('请输入有效的手机号码!');
return false;
}
callback();
}
</script>
上述JavaScript代码主要校验130至139、150至159以及180至189这几个号段。若需支持其他号段,请根据实际情况自行扩展正则规则。
交互效果为:当用户点击登录按钮时,若手机号格式不合法,则不执行任何页面跳转操作。
补充说明:JavaScript判断手机号是否合法(基于正则表达式)
/^13d{9}$/g||/^15[8,9]d{8}$/g
其中,^ 表示字符串开头,$ 表示字符串结尾,\d 匹配任意一位数字,其后跟随的 {9} 表示该数字需重复9次,这相当于 ddddddddd 的正则写法。整个表达式匹配以13开头且后接任意9个数字的字符串。/ 是正则表达式的定界符,其后的 g 标志表示全局匹配(若不添加则仅匹配第一个出现项)。在此场景下,是否使用 g 标志对 test 方法的返回结果无影响。test 方法返回一个布尔值,指示被查找的字符串中是否存在匹配模式:存在则返回 true,否则返回 false。
g 表示全局匹配,即查找文本内所有符合条件的结果;若不添加 g 标志,则仅匹配第一次出现的情况。
.test() 是前述 /^....$/g 正则表达式对象提供的一个方法。
以下提供一段完整的检测代码供参考:
完整检测代码示例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script language="javascript">
function chk()
{
var tel = document.all("text").value;
if(/^13d{9}$/g.test(tel)||(/^15[8,9]d{8}$/g.test(tel)))
{
alert("手机号正确");
}
else
{
alert("手机号错误");
}
}
</script>
</HEAD>
<BODY>
<form method="" action="">
手机号:<input type="text" name="text">
<input type="button" value="检测" onclick="chk()">
</form>
</BODY>
</HTML>
验证中国固定电话号码:
固定电话号码验证
((d{3,4})|d{3,4}-|s)?d{8}
以上内容由小编整理,介绍了JavaScript判断手机号是否正确并返回的相关实现,希望对大家有所帮助。如有任何疑问,欢迎留言,小编会及时回复。在此非常感谢大家对本站的支持!
什么时候该用JS构造器:与工厂模式、字面量的选择对比
2026-11-05 16:18:22
推荐几款轻量级JS照片墙开源库及对比
2026-11-05 15:56:19
JavaScript递归写法有哪些常见陷阱及避免方法
2026-11-05 14:53:38
JS数组浅拷贝与深拷贝怎么选?场景与方法总结
2026-11-05 14:41:02
p5.js 中 setup() 和 draw() 函数的执行机制详解
2026-11-05 12:32:38
