告诉我们发生了什么：
关于 创建电话号码验证项目，出现一个无法理解的问题。
中间这个checkStr函数是用于检测电话号码是否符合格式的函数，该函数在当前状态下能正确完成所有测试。
正则表达式longRegex，用于检测号码以1开头是否符合规则。在号码以1开头且符合规则的情况下，应该显示true，比如1 555-555-5555。
测试数字为1 555-555-5555，该数字符合电话号码结构规则。
1.在测试数字为1 555-555-5555的情况下，函数正确判定。longRegex正则判定结果应该为true，但是为什么longRegex会显示为false？和函数结果相反？我并没有使用任何取反运算符，实在找不到原因。
单独测试结果也显示为true。
2.将函数改动一下，将下面两个console.log语句搬运到上面，其他没有任何改动。同样的数字，1 555-555-5555，结果就和正确结果相反了，显示为false。
console.log方法应该并没有更改任何变量的值，为什么只是将其移动到上面，就导致函数出错？
到目前为止你的代码
<!-- file: index.html -->
<DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="styles.css"/>
<title>Telephone Number Validator</title>
</head>
<body>
<main>
<figure>
<img src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="logo"/>
</figure>
<p id="title">Telephone Number<br/>Validator</p>
<div id="container">
<div id="mark"></div>
<div id="background">
<label for="user-input">Enter a Phone Number:</label>
<input type="text" id="user-input"/>
<p id="results-div"></p>
</div>
<button id="check-btn">Check</button>
<button id="clear-btn">Clear</button>
</div>
</main>
<script src="script.js"></script>
</body>
</html>
/* file: script.js */
const userInput = document.querySelector('#user-input');
const checkBtn = document.querySelector('#check-btn');
const clearBtn = document.querySelector('#clear-btn');
const results = document.querySelector('#results-div');
/*
if str源字符没有任何输入
显示"Please provide a phone number"
else if str有输入，没有非数字/括号/空格符号，即为有效输入
去掉空格和括号的字符为proStr，检查长度
if proStr字符长度=10
str必须是正则/^\d{9}\d$|^\d{3}-\d{3}-\d{4}$|^\(\d{3}\)\d{3}-\d{4}$/g
return true，显示"Valid US number:"
设置开头结尾显示，是避免有重复的空格和括号
else if proStr字符长度=11 && 首位字符是1
str必须是正则/^1\s\d{3}-\d{3}-\d{4}$|^1\s\(\d{3}\)\s\d{3}-\d{4}$|^1\(\d{3}\)\d{3}-\d{4}$|^1\s(\d{3})\s\d{3} \d{4}$/g
return true，显示"Valid US number:"
else 有效输入但长度和格式不对
return false，显示"Invalid US number:"
else 存在非数字/括号/空格符号，无效输入
return false，显示"Invalid US number:"
*/
//去掉空格，括号，减号，只保留纯数字
const processStr = (str) => {
const regex = /[\s\(\)-]/g;
const proStr = str.replace(regex,'');
console.log(`proStr: ${proStr}`);
return proStr;
};
const chekcStr = (proStr, str) => {
//proStr只有数字用来检查长度，str源字符
const checkRegex = /[^\d\s-\(\)]/g;
const shortRegex = /^\d{9}\d$|^\d{3}-\d{3}-\d{4}$|^\(\d{3}\)\d{3}-\d{4}$/g;
const longRegex = /^1\s\d{3}-\d{3}-\d{4}$|^1\s\(\d{3}\)\s\d{3}-\d{4}$|^1\(\d{3}\)\d{3}-\d{4}$|^1\s(\d{3})\s\d{3} \d{4}$/g;
console.log(`是否是有效输入：${!checkRegex.test(str)}`);
if (str === '') {
console.log('');
return '';
} else if (!checkRegex.test(str)) {
if (proStr.length === 10 && shortRegex.test(str) === true) {
console.log(`shortRegex: ${shortRegex.test(str)}`);
//return shortRegex.test(str);
return true;
} else if (proStr.length === 11 && str[0] === '1' && longRegex.test(str) === true) {
console.log(`longRegex: ${longRegex.test(str)}`);
//return longRegex.test(str);
return true;
} else {
//输入有效但是长度或者是格式不符合
return false;
}
} else {
return false;
}
};
const updateUI = (result, str) => {
if (result === '') {
alert('Please provide a phone number');
} else if (result) {
results.style.display = 'block';
results.innerHTML += `Valid US number: ${str}<br/>`;
} else {
results.style.display = 'block';
results.innerHTML += `Invalid US number: ${str}<br/>`;
}
};
checkBtn.addEventListener('click', () => {
const str = userInput.value;
const proStr = processStr(str);
const result = chekcStr(proStr,str);
console.log(`chekcStr函数结果: ${result}`);
updateUI(result, str);
});
clearBtn.addEventListener('click', () => {
results.innerText = '';
results.style.display = 'none';
userInput.value = '';
})
/* file: styles.css */
* {
padding: 0;
margin: 0;
}
html {
background-color: rgba(59, 59, 79);
font-size: 16px;
text-align: center;
}
figure {
margin-top: 30px;
margin-bottom: 40px;
}
figure img {
width: 300px;
}
#title {
color: white;
font-size: 2rem;
font-weight: bold;
margin-bottom: 40px;
}
#container {
background-color: rgba(0, 0, 0);
border-radius: 10px;
width: 270px;
padding: 10px 10px 15px 10px;
margin: 0 auto;
}
#container #mark {
width: 100%;
height: 35px;
}
#background {
width: 220px;
height: 360px;
background-color: rgba(223, 223, 226);
padding: 10px 10px 0 10px;
margin: 0 auto;
margin-bottom: 5px;
}
#container label {
display: block;
margin-bottom: 15px;
}
#user-input {
display: block;
width: 100%;
height: 35px;
border: 1px solid black;
border-radius: 5px;
margin-bottom: 20px;
}
#results-div {
color: rgba(77, 56, 0);
font-size: 1.3rem;
}
button {
width: 100px;
height: 30px;
background: linear-gradient(180deg,rgb(251, 250, 250), rgb(198, 195, 192), rgb(148, 144, 137));
color: black;
font-size: 1.1rem;
border-left: 4px solod rgb(255, 255, 255);
border-top: 4px solod rgb(255, 255, 255);
border-right: 4px solod rgb(170, 170, 170);
border-bottom: 4px solod rgb(170, 170, 170);
}
#check-btn {
margin-right: 20px;
}
你的浏览器信息：
用户代理是： Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.0.0.0 Safari/537.36 Edg/142.0.0.0
挑战信息：
创建电话号码验证项目 - Build a Telephone Number Validator