第十三届蓝桥杯（Web 应用开发）线上模拟赛第二题

【Bug 调试】修复注册验证问题

背景介绍

注册页面是目前网站中最为常见的一个页面，通常在用户注册时，需要用户填写手机、邮箱等信息，但为了防止无效数据的录入，在提交注册时会对录入信息进行验证。本次试题实现了用户注册页面，但其中的手机号码验证一直无法顺利通过，请你对出现的 Bug 进行修复。

准备步骤

在开始答题前，你需要在线上环境终端中键入以下命令，下载并解压注册页面的源代码。

wget https://labfile.oss.aliyuncs.com/courses/4450/exam02.zip && unzip exam02.zip && rm exam02.zip

你可以参考下图中的 3 个步骤下载源码。同时，选中 index.html 右键启动 Web Server 服务，让项目运行起来。

图片描述

打开环境右侧的【Web 服务】，点击【exam02】文件夹，在运行后的页面中输入正确的手机号码，点击【提交】按钮，页面效果如下：

考试需求

要求手机号要以 186、134-139 或 150-152 开头，满足这些格式的手机号可以提交，否则显示「手机号格式不正确」。

如上所示的 index.html 中，即使输入了正确的手机号码，仍提示「手机号格式不正确」。请检查 index.html 文件中的 JavaScript 脚本，找到并修复当前手机号码验证所存在的 Bug，使注册页面的手机号码验证功能可以正常使用。

要求规定

请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径等。
满足题目需求后，保持 Web 服务处于可以正常访问状态，点击「提交检测」系统会自动判分。

解答

简单题。要求匹配指定规则的手机号。
根据考试需求检查 index.html 文件中的 JavaScript 脚本，发现其引用了index.js

打开index.js如下：

我们只需要补充验证手机号的规则即可，考虑使用正则表达式，如下

function isPhone(phoneNumber) {
    var phoneExp = /^((13[4-9])|(15[0-2])|(186))\d{8}/;
    var flag = phoneExp.test(phoneNumber);
    return flag;
}

记得开启web服务后提交，完成！