HTML&JS表单验证练习出现404错误，请求路径为数组内容

我最近在做一个HTML+JavaScript的小练习，需要实现两个输入字段的验证逻辑：

• 姓名输入字段：内容长度小于3字符时显示错误提示，否则清除错误
• 地区输入字段：先创建包含3个地点的数组，将用户输入与数组比对，不在数组中则显示错误提示

但实时预览时出现了奇怪的错误：页面显示Cannot GET /Msida,Pieta,Marsa，控制台提示Failed to load resource: the server responded with a status of 404 (Not Found)。下面是我的代码，求大佬帮忙看看问题出在哪？

我的代码 #

HTML代码 #

<!DOCTYPE html> 
<html> 
<head> 
    <title>Revision</title> 
</head> 
<body> 
    <nav id="menu"></nav> 
    <a>Full Name: </a><input type="text" name="fName" id="fName" ><br/> 
    <div id="divName"></div><br/> 
    <a>Locality: </a><input type="text" name="locality" id="locality" ><br/> 
    <div id="divLocality"></div><br/> 
    <script src="js/mainScript.js"></script> 
    <script src="js/detailsScript.js"></script> 
</body> 
</html>

JavaScript代码 #

var fName = document.getElementById("fName"); 
var locality = document.getElementById("locality"); 
var divName = document.getElementById("divName"); 
var divLocality = document.getElementById("divLocality"); 
var location = ["Msida", "Pieta", "Marsa"]; 

function validation() { 
    if(this.name == "fName") { 
        if(this.value.length < 3) { 
            divName.innerHTML = "Name should have atleast 3 characters"; 
            divName.style.color = "red"; 
        } else if(this.value.length >= 3) { 
            divName.innerHTML = ""; 
        } 
    } else if(this.name == "locality") { 
        if(location.indexOf(this.value) > -1) { 
            divLocality.innerHTML = "Location Exists"; 
            divLocality.style.color = "red"; 
        } else { 
            divLocality.innerHTML = "Location doesn't Exist"; 
            divLocality.style.color = "red"; 
        } 
    } 
} 

fName.addEventListener('focusout', validation); 
locality.addEventListener('focusout', validation);

问题原因 #

核心问题出在变量名冲突上：你使用了location作为数组的变量名，但location是浏览器提供的全局内置对象，它的作用是管理当前页面的URL和导航行为。

当你执行var location = ["Msida", "Pieta", "Marsa"]时，浏览器会把这个数组自动转换为字符串（变成Msida,Pieta,Marsa），然后尝试将当前页面导航到这个路径，这就导致了404错误——因为你的开发服务器根本没有这个路径对应的资源。

另外还有个小问题：地区验证的逻辑搞反了，你现在是输入存在时显示红色的"Location Exists"，不存在时才提示错误，这不符合预期。

修正后的代码 #

修正后的JavaScript代码 #

var fName = document.getElementById("fName");
var locality = document.getElementById("locality");
var divName = document.getElementById("divName");
var divLocality = document.getElementById("divLocality");
// 把变量名改成validLocations，避免覆盖全局location对象
var validLocations = ["Msida", "Pieta", "Marsa"];

function validation() {
    if(this.name === "fName") {
        if(this.value.length < 3) {
            divName.innerHTML = "Name should have at least 3 characters";
            divName.style.color = "red";
        } else {
            divName.innerHTML = "";
        }
    } else if(this.name === "locality") {
        // 修正验证逻辑：存在时显示成功提示，不存在时显示错误
        if(validLocations.indexOf(this.value) > -1) {
            divLocality.innerHTML = "Valid location!";
            divLocality.style.color = "green";
        } else {
            divLocality.innerHTML = "Location doesn't exist. Please choose from Msida, Pieta, Marsa";
            divLocality.style.color = "red";
        }
    }
}

fName.addEventListener('focusout', validation);
locality.addEventListener('focusout', validation);

额外优化建议 #

• HTML里用来显示标签文本的<a>标签，建议换成<label>，更符合语义化要求，比如：<label for="fName">Full Name: </label>
• 可以给输入框添加required属性，增强原生表单验证的体验

内容的提问来源于stack exchange，提问作者johnny