Javascript HTML 中的用户名和密码验证

Question

提问by VINAY S G

The code below is supposed to validate the username and password and if correct should run "run.html" else run "fail.html",But the code is not executing as required.What is the error in the code?

下面的代码应该验证用户名和密码，如果正确应该运行“run.html”否则运行“fail.html”，但是代码没有按要求执行。代码中的错误是什么？

<!doctype html>
<html>
<body>

    <form>

    <font size=5><font color="black"><input type="text" placeholder="Username" name="text1"><br /><br /></font>

    <font size=5><font color="white"><input type="password" placeholder="Password" name="text2"><br /><br /></font>

    <font size=5><input type="submit" value="Login"  onclick=javascript.validate(test1.value,test2.value)></font>

    </form>

<! javascript>
<script language="javascript">
function validate(text1,text2)
{
    if(text1==workshop && text2==workshop)
    load("run.html");
    else
    {
        load("fail.html");
    }
}
function load(url)
{
    location href=url;
}
</script>
</body>
</html>

Answer 1

回答by MT0

Firstly - don't validate credentials like this - do it on the server side as anything client side is practically worthless for security.

首先 - 不要像这样验证凭据 - 在服务器端执行此操作，因为客户端对安全性而言实际上毫无价值。

Other than that...

除此之外...

Use css to change the presentation of elements rather than html elements like font.
javascript.validate(...)should be javascript:validate(...)or just validate(...).
Use <script type="text/javascript">to start a (java)script element.
location hrefshould be location.href
You need to wrap string values in quotes (i.e. workshopshould be "workshop").
Change name="text1"to id="text1"and then you can get the value using document.getElementById("text1").value.

使用 css 来改变元素的呈现方式，而不是像font.
javascript.validate(...)应该javascript:validate(...)或只是validate(...)。
使用<script type="text/javascript">启动（Java）的脚本元素。
location href应该 location.href
您需要将字符串值用引号括起来（即workshop应该是"workshop"）。
更改name="text1"为id="text1"，然后您可以使用document.getElementById("text1").value.

<form>
    <input type="text" placeholder="Username" id="text1" /><br />
    <input type="password" placeholder="Password" id="text2" /><br />
    <input type="button" value="Login"  onclick="javascript:validate()" />
</form>
<script type="text/javascript">
function validate()
{
    if(   document.getElementById("text1").value == "workshop"
       && document.getElementById("text2").value == "workshop" )
    {
        alert( "validation succeeded" );
        location.href="run.html";
    }
    else
    {
        alert( "validation failed" );
        location.href="fail.html";
    }
}
</script>

Answer 2

回答by KarelG

Since you are new on web development, i have decided to post this answer, that you would get useful advises. But first, I am curious if you are using a tutorial. If you are using a tutorial, please look for an another one since your HTML contains "ancient" tags.

由于您是 Web 开发的新手，因此我决定发布此答案，以便您获得有用的建议。但首先，我很好奇您是否使用教程。如果您正在使用教程，请寻找另一个教程，因为您的 HTML 包含“古代”标签。

This post contains of three parts: HTML, CSS, then JavaScript.

这篇文章包含三个部分：HTML、CSS 和 JavaScript。

About HTML

关于 HTML

Let's start with the HTML first. Here is an example of what you have written:

让我们先从 HTML 开始。以下是您所写内容的示例：

<font size=5>
    <font color="black">
        <input type="text" placeholder="Username" name="text1">
        <br /><br />
    </font>

When you want to use a tag, you can open it by <tagname>. But some tags require that you have to close it. You can close a tag with </tagname>

当你想使用一个标签时，你可以通过来打开它<tagname>。但是有些标签要求您必须关闭它。你可以关闭一个标签</tagname>

This example is a bad example

这个例子是个坏例子

<div>
    // other inner HTML tags

This is a good example:

这是一个很好的例子：

<div>
    // other inner HTML tags.
</div>

You can see that i have added </div>to close the div-element. The modern browsers is able to "solve" it for you, when parsing the HTML through the DOM, but it is best to do it yourself.

你可以看到我添加</div>了关闭 div 元素。当通过 DOM 解析 HTML 时，现代浏览器能够为您“解决”它，但最好自己做。

However, there are tags which contains multiple attributes. Like the input element.

但是，有些标签包含多个属性。就像输入元素一样。

<input type="text" placeholder="Username" name="text1" />

Please notice the added /at the end of the tag. I also recommend to use convenient name for the input field. If you expect it to be used for user name, please call it by "username". Here is an improved example:

请注意添加/在标签末尾。我还建议为输入字段使用方便的名称。如果您希望它用于用户名，请使用“用户名”来称呼它。这是一个改进的示例：

<input type="text" placeholder="Username" name="username" id="username" />

If you want to read more about HTML, please read this documentationabout HTML. Try to avoid old (not used anymore) tags like <font>or even <! javascript>. Where did you have dug this one?

如果您想阅读有关 HTML 的更多信息，请阅读有关 HTML 的文档。尽量避免使用旧的（不再使用）标签<font>，甚至<! javascript>. 你在哪里挖的这个？

About CSS

关于 CSS

You have used <font>in your HTML. As said in the previous section, it is not used anymore. To style the HTML, we are using CSS now. That stands for "Cascading Style Sheets" which allows you to style a plain HTML document in a nice looking webpage. If you want to read more about css, you can use this documentation.

你已经<font>在你的 HTML 中使用了。如上一节所述，它不再使用。为了设置 HTML 样式，我们现在使用 CSS。这代表“层叠样式表”，它允许您在漂亮的网页中设置纯 HTML 文档的样式。如果您想阅读有关 css 的更多信息，可以使用此文档。

In css, if you want to style the font, you can use for example

在 css 中，如果要设置字体样式，可以使用例如

input[type="text"] {
    color: red;
}

This CSS part says "search for input[type="text"]elements". Then color the text-color as red. This is a simple example. By using CSS, you can manipulate the look of your webpage. If you want to learn more about CSS, please use the given documentation, or use this tutorial.

这个 CSS 部分说“搜索input[type="text"]元素”。然后将文本颜色着色为红色。这是一个简单的例子。通过使用 CSS，您可以操纵网页的外观。如果您想了解有关 CSS 的更多信息，请使用给定的文档，或使用本教程。

About JavaScript

关于 JavaScript

What you have entered is good, but you still need to check for the basics. Let's look to your first function: validate.

您输入的内容很好，但您仍然需要检查基础知识。让我们看看您的第一个功能：验证。

function validate(text1,text2)
{
    if(text1==workshop && text2==workshop)
        load("run.html");
    else
    {
        load("fail.html");
    }
}

Your condition part is text1==workshop && text2==workshop. The variables text1and text2is known (passed by the function as argument). But what about workshop? Did you have defined it somewhere ? If not, then this code would fail, because the script will look for a variable workshopthat doesn't exist.

你的条件部分是text1==workshop && text2==workshop。变量text1和text2是已知的（由函数作为参数传递）。但是呢workshop？你有没有在某处定义它？如果不是，则此代码将失败，因为脚本将查找workshop不存在的变量。

I suppose that you want to search by string name:

我想你想按字符串名称搜索：

text1=="workshop"

Which is a valid condition check. The script will see if text1matches the given string.

这是一个有效的条件检查。该脚本将查看是否text1与给定的字符串匹配。

Now, about coding style. You are firstly not using {and }at the first if, but you are using that at your else. Try to handle one coding style. Either you are using {and }at both or not even one.

现在，关于编码风格。您首先没有在第一个 if 中使用{and }，但是您在 else 中使用了它。尝试处理一种编码风格。您要么同时使用{and要么不使用and }。

For example, with {and }:

例如，使用{和}：

if(text1=="workshop" && text2=="workshop") {
    load("run.html");
}
else {
    load("fail.html");
}

Or without

或者没有

if(text1==workshop && text2==workshop)
    load("run.html");
else
    load("fail.html");

Both are better readable then what you have entered. If your condition block is multi-line, you have to use {and }of course.

两者都比您输入的内容更具可读性。如果您的条件块是多行的，您当然必须使用{and }。

if( condition ) {
    // line 1
    // line 2
}

This means that line1 and line2 will be executed if the conditionis true.

这意味着如果condition为真，将执行第 1 行和第 2 行。

Now, the function usage. You have used

现在，函数用法。你用过

function load(url)
{
    location href=url;
}

This function doesn't work. It will give you a runtime error. location.hrefis what you need. If you want to use native JavaScript functions, ensure that you have named it correctly.

这个功能不起作用。它会给你一个运行时错误。location.href是你所需要的。如果要使用原生 JavaScript 函数，请确保已正确命名。

Back to your question. You want to check the entered data when you have clicked the button. This is possible by using "events". You have used onclickin the button tag

回到你的问题。您想在单击按钮时检查输入的数据。这可以通过使用“事件”来实现。你onclick在按钮标签中使用过

<input type="submit" value="Login" onclick="validate()" />

Don't worry, this will work. (i'm only not a fan of this style). If you click on the button, it will run the "validate()" function. There is no need to add "javascript" before it. The DOM can handle it. The function name and its argument must be same as the entered string in the onclickattribute. If you don't do this, the script will search for a non existing function, thus leading to an error. Since we are using validate without arguments, we have to redefine the function as below.

别担心，这会奏效的。（我只是不喜欢这种风格）。如果单击该按钮，它将运行“validate()”函数。不需要在它之前添加“javascript”。DOM 可以处理它。函数名称及其参数必须与onclick属性中输入的字符串相同。如果不这样做，脚本将搜索不存在的函数，从而导致错误。由于我们使用不带参数的验证，我们必须重新定义函数，如下所示。

function validate()
{
    if(text1=="workshop" && text2=="workshop")
        // code omitted
}

Please recall that text1is a variable and has to be defined. Since these aren't passed by methods argument, you have to select the input tags, to ensure that you can obtain the data required. This can be done by document.getElementById()function, which selects an element by its id.

请记住，这text1是一个变量，必须定义。由于这些不是通过方法参数传递的，您必须选择输入标签，以确保您可以获得所需的数据。这可以通过document.getElementById()函数来完成，它通过它的 id 选择一个元素。

var text1 = document.getElementById("username");

This says "get the element by its id: username". Please check the HTML section of the example. You can find out that the input element has an id="username"attribute.

这表示“通过其 id 获取元素：用户名”。请检查示例的 HTML 部分。可以发现 input 元素有一个id="username"属性。

But we are not there yet ! The function document.getElementByIdgives you a node of the element with the given ID. Since the element is an input field, you can use the .valueproperty to obtain its current value. Do the same for text2 (the password field, then you have a working function !

但我们还没有到那里！该函数document.getElementById为您提供具有给定 ID 的元素节点。由于该元素是一个输入字段，您可以使用该.value属性来获取其当前值。对 text2 （密码字段，然后你有一个工作功能！

function validate()
{
    var text1 = document.getElementById("username");
    var text2 = document.getElementById("password");
    if(text1.value=="workshop" && text2.value=="workshop") {
        load("run.html");
    }
    else {
        load("fail.html");
    }
}

There are other ways to select your tags in the document: getElementByClassName, querySelector, querySelectorAlland more. Please check for its documentation of how it works.

还有其他的方法在文档中，选择您的标签：getElementByClassName，querySelector，querySelectorAll等等。请检查其工作原理的文档。

That's all what you need to ensure that your code works. If you want to know more about javascript, please read this documentation. Or start learning the basics by using this tutorial.

这就是确保代码正常工作所需的全部内容。如果您想了解有关 javascript 的更多信息，请阅读此文档。或者通过使用本教程开始学习基础知识。

Please don't copy paste my answer directly. Try to learn more about web developing. It's an amazing world and it can help yourself more.

请不要直接复制粘贴我的答案。尝试了解更多有关 Web 开发的信息。这是一个奇妙的世界，它可以帮助自己更多。

But, still a side note: you are validating data on client side. I would not recommend that because it is not security safe. Usually the form should be submitted to a server, which then validates the form. If the entered data is valid, the server will redirect the user to the right page. This can be done with PHP, ASP.NET, ...

但是，仍然需要注意：您正在客户端验证数据。我不建议这样做，因为它不安全。通常应该将表单提交给服务器，然后服务器验证表单。如果输入的数据有效，服务器会将用户重定向到正确的页面。这可以通过 PHP、ASP.NET、...

full example

完整示例

    function validate() {
      var text1 = document.getElementById("username");
      var text2 = document.getElementById("password");
      if (text1.value == "workshop" && text2.value == "workshop") {
        load("run.html");
      } else {
        load("fail.html");
      }
    }

    function load(url) {
      location.href = url;
    }

input[type="text"] {
  color: red;
}

<form>
  <input type="text" placeholder="Username" name="username" id="username" />
  <br />
  <br />
  <input type="password" placeholder="Password" name="password" id="password" />
  <br />
  <br />
  <input type="submit" value="Login" onclick="validate()" />
</form>

Answer 3

回答by chaithanya

<form>
    <input type="text" placeholder="Username" id="text1" /><br />
    <input type="password" placeholder="Password" id="text2" /><br />
    <input type="button" value="Login"  onclick="javascript:validate()" />
</form>
<script type="text/javascript">
function validate()
{
    if(   document.getElementById("text1").value == "workshop"
       && document.getElementById("text2").value == "workshop" )
    {
        alert( "validation succeeded" );
        location.href="run.html";
    }
    else
    {
        alert( "validation failed" );
        location.href="fail.html";
    }
}
</script>

Answer 4

回答by David Deutsch

There are (quite) a few errors in the code:

代码中有（相当）一些错误：

onclick=javascript.validate(test1.value,test2.value)should be onclick="javascript:validate(test1.value,test2.value)"(i.e. there should be a colon instead of a period).

onclick=javascript.validate(test1.value,test2.value)应该是onclick="javascript:validate(test1.value,test2.value)"（即应该有一个冒号而不是一个句点）。

test1and test2do not exist.

test1并且test2不存在。

if(text1==workshop && text2==workshop)should be if(text1=="workshop" && text2=="workshop")

if(text1==workshop && text2==workshop)应该 if(text1=="workshop" && text2=="workshop")

location href=url;should be location.href=url;

location href=url;应该 location.href=url;

At the end of the day, however, even if you get this working this "security" will be trivial to get around; anyone can just view the source of the page and see the username and password.

然而，归根结底，即使你让这个工作正常，这个“安全”也将变得微不足道。任何人都可以查看页面的来源并查看用户名和密码。

Javascript HTML 中的用户名和密码验证

提问by VINAY S G

回答by MT0

回答by KarelG

About HTML

关于 HTML

About CSS

关于 CSS

About JavaScript

关于 JavaScript

full example

完整示例

回答by chaithanya

回答by David Deutsch

相关推荐

最近更新

标签

Javascript HTML 中的用户名和密码验证

提问by VINAY S G

回答by MT0

回答by KarelG

About HTML

关于 HTML

About CSS

关于 CSS

About JavaScript

关于 JavaScript

full example

完整示例

回答by chaithanya

回答by David Deutsch

相关推荐

Javascript 条带错误 400 - 不能多次使用条带令牌

Javascript 使用 querySelectorAll 检索直接子项

Javascript iOS - 手动聚焦输入/文本区域的解决方法

Javascript 覆盖浏览器的键盘快捷键

相关推荐

最近更新

标签