如何使用可验证此格式的外部JS文件创建html页面AAA.111#2222_aa-1234 [英] How to create an html page with an external JS file that validates this format AAA.111#2222_aa-1234
问题描述
这是我的html页面.我正在尝试验证此格式AAA.111#2222_aa-1234.我不确定是什么阻止了html文件访问JS文件.或者，如果我在JS文件中的正则表达式正确无误.
This is my html page. I'm trying to validate this format AAA.111#2222_aa-1234. I'm not sure what's stopping the html file from accessing the JS file. OR if my regular expression in the JS file is even correct.
<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文件.
This is my external JS file.
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;
推荐答案
真是一团糟！似乎您已经将所有已学到的东西混在脑中:).不要让这个让您失望，我们总有一天去过那里.
What a mess! Seems like you have all the stuff that you've learnt mixed in your mind :). Don't let this turn you down, we've all been there someday.
伙计，让我们稍微了解一下代码.
Well dude, let's get into your code a bit by a bit.
首先，您需要学习一些有关表单的知识；当您使用服务器端语言提交并设置操作时，表单就会起作用.当您使用GET方法提交表单时，实际上会发生什么，它将获取用户在表单中设置的所有参数，并调用在该表单的action中指定的服务器端文件. GET情况下的请求将作为查询字符串添加到链接.让我们来看一个例子.假设您将表单的操作设置为action="yourServersideFile.php，因此这是将处理请求的文件.然后在您的表单中，有两个名称分别为输入的名称:标签中的name和number.提交表单时的请求将如下所示: https://yourapp .com/yourServersideFile.php?name = yourname& number = yourNumber .
First of all, you need to learn something about forms; forms work when you submit and set an action with a serverside language. What actually happens when you submit a form with a GET method, it gets all the parameters that the user set in your form and calls a serverside file which you specify in the action of that form. The request in a GET case will be added to the link as query string. Let's see an example. Suppose that you set the action of the form to action="yourServersideFile.php, so this is the file that will process the request. then in your form there are two inputs with names: name and number in their tags. The request when you submit the form will be something like this: https://yourapp.com/yourServersideFile.php?name=yourname&number=yourNumber.
提交后，文件yourServersideFile.php将处理查询字符串中已传递给它的数据，进行计算，并且之后 yourServersideFile.php将在以下位置发送响应:相同的网址，或将其传递到另一个显示结果的响应页面.
After submitting, the file yourServersideFile.php will process the data that has been passed to it in the query string, make the calculations, and AFTER THAT yourServersideFile.php will send the response either at the same url or will pass it to another response page that will display the results.
如果您考虑过该过程，则在单击提交"按钮并将页面发送到服务器上的文件后，页面已被销毁，然后在服务器上运行了caclculations，然后服务器向您发送了新页面.
If you thought about that process, your page has been distroyed after clicking the submit button and sent the data to a file on the server, then the caclculations ran on the server, then the server sent you a new page.
现在让我们看看代码中的第一个错误，您使用客户端javascript处理表单.当您使用javascript时，提交表单后，除您可能在localStorage中保存的信息外，您所构建的所有内容都会与该页面一起被破坏.因此，除非您的后端位于Node.Js中，否则您在现实生活中将永远不会看到带有action="somefile.js"和js扩展名的表单，在这种情况下，这甚至是使用Node.js的一种不好的方法.对于您而言，使用Express在不到一分钟的时间内设置端点并使用AJAX来满足您的所有需求而无需重新加载页面更好.
Now let's see the first mistake in your code, you used clientside javascript to process a form. When you use javascript, all what you've built will be distroyed with the page after you submit the form except the information you might've sabed in the localStorage. So, you will never ever in the real life see a form with action="somefile.js" with the js extension unless if your backend in in Node.Js, and in this case that will even be a bad way to use Node.js. Better for you to setup an endpoint in less than a minute with Express and use AJAX to finsih all your needs without reloading the page.
好吧，现在我们意识到我们需要将表单和按钮更改为普通输入和链接.
Well, now we realize that we need to change the form and button to normal input and link.
接下来，您已经定义了一个函数，但是由于您没有设置任何事件来触发该函数，也没有调用它，因此它将永远不会触发.
Next, you have defined a function, but it will never fire as you have not set any event to trigger the function nor have you called it.
JavaScript基本上是一种事件驱动的语言；当偶发事件(键入，单击，移动鼠标等)触发一个事件时，此事件将触发一些功能.因此，要使我们的功能生效，我们需要设置一个事件以让Javascript知道它现在应该运行此功能.因此，在javascript中，我添加了一个事件侦听器，以检测对我们链接的点击(取代了该按钮).
Javascript is basically an event driven language; when an even happens (typing, click, moving mouse, etc...) that triggers an event, this event triggers some functions. So, to get our function into action we need to set an event to let Javascript know that it should run this function now. So in the javascript I've added an event listener to detect a click on our link (which replaces that button).
之后，您将在所附的JS代码中看到注释.
After that you'll see the comments in the JS code attached.
因此，要在此处运行代码，就是文件需要像它们一样运行的HTML和js文件:
So to have your code running here are the HTML and js files that your files need to run like them:
<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代码应如下所示:
and your js code should be like this:
//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()
}
})
我希望这对帮助您了解其工作原理很有帮助:).
I wish that was helpful to let you understand how it works :).
这篇关于如何使用可验证此格式的外部JS文件创建html页面AAA.111#2222_aa-1234的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
