这是我的html页面。我正在尝试验证此格式 AAA.111#2222_aa-1234。我不确定是什么阻止了 html 文件访问 JS 文件。或者，如果我在JS文件中的正则表达式是正确的。
<html lang = "en">
<head>
<title>random</title>
</head>
<body>
<form>
<p>Please enter course information</p>
<input type="text" name="userInput" id="userInput" maxlength="15">
<input type="button" value="validate" onclick="validationFunction()">
</form>
</body>
</html>
这是我的外部JS文件。
function validationFunction(input) {
var userCourse = document.getElementById("userInput").value;
var myRegularExpression = /[a-z]{3}(.d{3})(#d{4})(_[a-z]{2})(-d{4})/gi;
return (myRegularExpression.test(input));
}
if (validationFunction(userInput)){
text = "valid";
} else {
text = "invalid";
}
document.getElementById("validationResults").innerHTML = text;
真是一团糟！似乎你脑海中混合了所有你学到的东西:)。不要让这让你失望，我们总有一天会去过那里。
好吧，伙计，让我们稍微了解一下您的代码。
首先，您需要了解表单;表单在提交并使用服务器端语言设置操作时起作用。当您使用GET方法提交表单时，实际会发生什么，它会获取用户在表单中设置的所有参数，并调用您在该表单action中指定的服务器端文件。GET情况下的请求将作为查询字符串添加到链接中。让我们看一个例子。假设您将表单的操作设置为action="yourServersideFile.php，因此这是将处理请求的文件。然后在您的表单中，有两个带有名称的输入：name和number在其标签中。提交表单时的请求如下所示：https://yourapp.com/yourServersideFile.php?name=yourname&number=yourNumber。
提交后，文件yourServersideFile.php将处理在查询字符串中传递给它的数据，进行计算，之后yourServersideFile.php将在同一 url 发送响应，或者将其传递到另一个将显示结果的响应页面。
如果您考虑过该过程，则在单击提交按钮后，您的页面已被分发，并将数据发送到服务器上的文件，然后在服务器上运行计算，然后服务器向您发送一个新页面。
现在让我们看看代码中的第一个错误，你使用客户端 javascript 来处理一个表单。当你使用javascript时，你构建的所有内容都将在你提交表单后与页面一起分发，除了你可能在localStorage中搜索的信息。因此，在现实生活中，您永远不会看到带有 js 扩展名的action="somefile.js"表单，除非您的后端在 Node.Js 中，在这种情况下，这甚至是使用 Node.js 的糟糕方式。最好使用 Express 在不到一分钟的时间内设置端点，并使用 AJAX 满足您的所有需求，而无需重新加载页面。
好吧，现在我们意识到我们需要将表单和按钮更改为普通输入和链接。
接下来，您已经定义了一个函数，但它永远不会触发，因为您没有设置任何事件来触发该函数，也没有调用它。
Javascript基本上是一种事件驱动的语言;当偶数发生(打字，点击，移动鼠标等(触发事件时，该事件会触发一些函数。因此，为了使我们的函数发挥作用，我们需要设置一个事件，让Javascript知道它现在应该运行这个函数。因此，在javascript中，我添加了一个事件侦听器来检测对我们链接的单击(替换了该按钮(。
之后，您将在随附的 JS 代码中看到注释。
因此，要在这里运行您的代码，您的文件需要像它们一样运行 HTML 和 js 文件：
<html lang="en">
<head>
<title>random</title>
</head>
<body>
<div class="wrapper">
<label for="userCourse">Please enter your course information:</label>
<input type="text" id="userCourse" name="userCourse">
<a href="#" id="my-button">New Validate</a>
<p id="validationResults"></p>
</div>
<script src="validation.js"></script>
</body>
</html>
你的 js 代码应该是这样的：
//capture the button
document.addEventListener('click', (event) => {
if (event.target.id === 'my-button') { //that detects a click on the button
const input = document.getElementById('userCourse').value //this stores the text from the input in a variable called input
const myRegularExpression = /[a-z]{3}(.d{3})(#d{4})(_[a-z]{2})(-d{4})/gi
// now you test the value of the input
if (input) {
var result = myRegularExpression.test(input) //store the test results
// then display it in the p tag
document.getElementById('validationResults').innerHTML = result? "valid" : "invalid"
}
console.log(typeof(myRegularExpression))
event.preventDefault()
}
})
我希望这有助于您了解它是如何:)工作的。