我目前正在开发一个javascript验证工具，该工具接受地址输入值并将其与嵌入的对象数组进行比较。我让这个工具部分工作，如果输入字段中的所有值都与数组中的第一个对象匹配，它将显示true，但如果失败，我希望它循环遍历数组中的下一个对象，直到它找到匹配并显示true，或者与任何对象都不匹配并显示false。我试着用for循环来做这个，但没能成功。我附上了代码作为我所说的事情的证明，直到我添加了for循环，因为在我这样做之前它一直在工作。事先很抱歉，我还是java脚本的新手，可能没有最佳实践，但我们接受任何帮助！
function myFunction() {
var str = document.getElementById('address').value;
var res = str.split(" ");
var streetNumber = res[0];
var x = streetNumber;
var y = phaseOne[0].streetNumberLow;
var z = phaseOne[0].streetNumberHigh;
if(x >= y && x <= z) {
if (res[1] == phaseOne[0].streetName){
if(res[2] == phaseOne[0].streetCode){
if(res[3] == phaseOne[0].city){
if(res[4] == phaseOne[0].state){
if(res[5] == phaseOne[0].zipCode) {
var w = "true";
} else {
var w = "false";
}
} else {
var w = "false";
}
} else {
var w = "false";
}
} else {
var w = "false";
}
} else {
var w = "false";
}
} else {
var w = "false";
}
document.getElementById('demo').innerHTML = w;
};
var phaseOne = [
{
"streetNumberLow": "1",
"streetNumberHigh": "436",
"streetName": "barnhart",
"streetCode": "rd",
"city": "waynesburo",
"state": "va",
"zipCode": "22980"
},
{
"streetNumberLow": "437",
"streetNumberHigh": " 1338",
"streetName": "barnhart",
"streetCode": "rd",
"city": "fort defiance",
"state": "va",
"zipCode": "24437"
},
{
"streetNumberLow": "1339",
"streetNumberHigh": "1372",
"streetName": "barnhart",
"streetCode": "rd",
"city": "crimora",
"state": "va",
"zipCode": "24431"
}
];@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Poppins:wght@400;700&display=swap');
/* Global */
* {
margin: 0;
padding: 0;
font-family: 'Bebas Neue', cursive;
/* box-sizing: border-box; */
/* overflow: hidden; */
}
#address-checker {
height:20vh;
width: 60%;
margin: auto;
margin-top: -3vh;
padding: 3vw;
background-color: #fff;
position: relative;
z-index: 1;
box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.5);
}
.checker-container {
height: 20vh;
}
.address-header {
margin: 1vh;
text-align: center;
color: #2277AE;
letter-spacing: 1px;
font-size: clamp( 1.2rem, 2.75vw, 3.5rem);
}
.address-checker-input {
padding: 3vh 0;
}
.address-box {
margin: 3vh 0 0 10vw ;
width: 60%;
padding: .75rem 0 .75rem .5rem;
border-radius: 10px;
border: #2277AE 2px solid;
color: #2277AE;
}
.address-box:hover {
border-color: #FEA00B;
transition: .2s;
}
.go-btn {
background-color: #2277AE;
padding: .75rem;
border-radius: 10px;
border: #2277AE 2px solid;
color: #fff;
}
.go-btn:hover {
border-color: #FEA00B;
transition: .2s;
}<section id="address-checker">
<div class="checker-container">
<h1 class="address-header">
Is Fiber to the Home available for you?
</h1>
<div class="address-checker-input">
<input
id="address"
type="text"
name="searchaddress"
placeholder="Street Address, City, State, Zip Code"
class="address-box"
/>
<button class="go-btn" onclick="myFunction()">Go</button>
</div>
<p id="demo"></p>
</div>
</section>当您迷失在自己的代码中时，请尝试创建只做一件事的小函数。它将使调试变得更容易，并且您将立即知道在哪里查找。
例如，您可以创建一个函数，该函数将地址作为字符串，并返回一个Object及其所有属性，这样您就不必担心代码中的其他部分，如果您需要调整它，它就会在这里：
function parseAddressString(str) {
// Check out how this Regex works here: https://regex101.com/r/1UYeEM/2
var matches = str.match(/(?<streetNumber>d+)s+(?<streetName>[ws-]+)s+(?<streetCode>w+),?s+(?<city>[ws-]+),?s+(?<state>w+),?s+(?<zipCode>d+)/);
if (matches) { return matches.groups; }
return false; // The address did not match the Regex
}
console.log(parseAddressString('33 Barnhart rd, Waynesburo, VA, 22980'));
console.log(parseAddressString('555 North Dakota st, New-York, NY, 77777'));.as-console-wrapper { max-height: 100% !important; }一旦你有了它，你就可以创建一个函数，它接受一个地址对象，一个"；阶段"；对象，并返回这些是否匹配：
function doesStringMatch(a, b) {
return a.toLowerCase().includes(b.toLowerCase());
} function parseAddressString(str) { var matches = str.match(/(?<streetNumber>d+)s+(?<streetName>[ws-]+)s+(?<streetCode>w+),?s+(?<city>[ws-]+),?s+(?<state>w+),?s+(?<zipCode>d+)/); if (matches) { return matches.groups; } return false; }
function doesAddressMatchPhase(address, phase) {
return address &&
+address.streetNumber >= +phase.streetNumberLow &&
+address.streetNumber <= +phase.streetNumberHigh &&
doesStringMatch(address.streetName, phase.streetName) &&
doesStringMatch(address.streetCode, phase.streetCode) &&
doesStringMatch(address.city, phase.city) &&
doesStringMatch(address.state, phase.state) &&
doesStringMatch(address.zipCode, phase.zipCode);
}
var phase = {"streetNumberLow": "1", "streetNumberHigh": "436", "streetName": "barnhart", "streetCode": "rd", "city": "waynesburo", "state": "va", "zipCode": "22980"};
var address1 = parseAddressString('33 Barnhart rd, Waynesburo, VA, 22980');
console.log( doesAddressMatchPhase(address1, phase) ); // true
var address2 = parseAddressString('555 North Dakota st, New-York, NY, 77777');
console.log( doesAddressMatchPhase(address2, phase) ); // false然后，创建一个函数，检查其中一个阶段是否匹配：
function isEligible(str) {
var address = parseAddressString(str);
return phaseOne.some(function(phase) {
return doesAddressMatchPhase(address, phase);
});
}
完整演示
/* Unchanged */ var phaseOne = [{"streetNumberLow": "1", "streetNumberHigh": "436", "streetName": "barnhart", "streetCode": "rd", "city": "waynesburo", "state": "va", "zipCode": "22980"},{"streetNumberLow": "437", "streetNumberHigh": " 1338", "streetName": "barnhart", "streetCode": "rd", "city": "fort defiance", "state": "va", "zipCode": "24437"},{"streetNumberLow": "1339", "streetNumberHigh": "1372", "streetName": "barnhart", "streetCode": "rd", "city": "crimora", "state": "va", "zipCode": "24431"}];
function parseAddressString(str) {
var matches = str.match(/(?<streetNumber>d+)s+(?<streetName>[ws-]+)s+(?<streetCode>w+),?s+(?<city>[ws-]+),?s+(?<state>w+),?s+(?<zipCode>d+)/);
if (matches) { return matches.groups; }
return false;
}
function doesStringMatch(a, b) {
return a.toLowerCase().includes(b.toLowerCase());
}
function doesAddressMatchPhase(address, phase) {
return address &&
+address.streetNumber >= +phase.streetNumberLow &&
+address.streetNumber <= +phase.streetNumberHigh &&
doesStringMatch(address.streetName, phase.streetName) &&
doesStringMatch(address.streetCode, phase.streetCode) &&
doesStringMatch(address.city, phase.city) &&
doesStringMatch(address.state, phase.state) &&
doesStringMatch(address.zipCode, phase.zipCode);
}
function isEligible(str) {
var address = parseAddressString(str);
return phaseOne.some(function(phase) {
return doesAddressMatchPhase(address, phase);
});
}
function myFunction() {
var str = document.getElementById('address').value, eligible = isEligible(str);
document.getElementById('demo').innerHTML = eligible ? "true" : "false";
}<!-- Unchanged HTML & CSS --> <section id="address-checker"> <div class="checker-container"> <h1 class="address-header"> Is Fiber to the Home available for you? </h1> <div class="address-checker-input"> <input id="address" type="text" name="searchaddress" placeholder="Street Address, City, State, Zip Code" class="address-box"/> <button class="go-btn" onclick="myFunction()">Go</button> </div><p id="demo"></p></div></section><style>@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Poppins:wght@400;700&display=swap');/* Global */*{margin: 0; padding: 0; font-family: 'Bebas Neue', cursive;/* box-sizing: border-box; */ /* overflow: hidden; */}#address-checker{height:20vh; width: 60%; margin: auto; margin-top: -3vh; padding: 3vw; background-color: #fff; position: relative; z-index: 1; box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.5);}.checker-container{height: 20vh;}.address-header{margin: 1vh; text-align: center; color: #2277AE; letter-spacing: 1px; font-size: clamp( 1.2rem, 2.75vw, 3.5rem);}.address-checker-input{padding: 3vh 0;}.address-box{margin: 3vh 0 0 10vw ; width: 60%; padding: .75rem 0 .75rem .5rem; border-radius: 10px; border: #2277AE 2px solid; color: #2277AE;}.address-box:hover{border-color: #FEA00B; transition: .2s;}.go-btn{background-color: #2277AE; padding: .75rem; border-radius: 10px; border: #2277AE 2px solid; color: #fff;}.go-btn:hover{border-color: #FEA00B; transition: .2s;}</style>