Question

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

<!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

首先 - 不要验证这样的凭据 - 在服务器端进行，因为任何客户端实际上都没有安全价值。

除此之外......

使用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获取该值。

＆＃13;

<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>

＆＃13;

Answer 2

由于您是网络开发的新手，我已决定发布此答案，您将获得有用的建议。但首先，如果您使用的是教程，我很好奇。如果您正在使用教程，请查找另一个教程，因为您的HTML包含＆＃34;古代＆＃34;标签

这篇文章包含三个部分：HTML，CSS，然后是JavaScript。

关于HTML

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

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

如果您想使用标记，可以<tagname>打开它。但有些标签要求您必须关闭它。您可以使用</tagname>

关闭代码

这个例子是个坏例子

<div>
    // other inner HTML tags

这是一个很好的例子：

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

你可以看到我添加了</div>来关闭div元素。现代浏览器能够解决问题。在通过DOM解析HTML时，它适合您，但最好自己动手。

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

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

请注意标记末尾添加的/。我还建议为输入字段使用方便的名称。如果您希望将其用于用户名，请通过＆＃34;用户名＆＃34;来调用它。这是一个改进的例子：

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

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

关于CSS

您在HTML中使用了<font>。如前一节所述，它已不再使用。为了设置HTML的样式，我们现在正在使用CSS。这代表＆＃34;层叠样式表＆＃34;它允许您在漂亮的网页中设置纯HTML文档的样式。如果您想了解有关css的更多信息，可以使用此documentation。

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

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

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

关于JavaScript

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

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

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

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

text1=="workshop"

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

现在，关于编码风格。您首先没有使用{和}，但是您正在使用其他人。尝试处理一种编码风格。您可以同时使用{和}，也可以不使用{。

例如，使用}和if(text1=="workshop" && text2=="workshop") { load("run.html"); } else { load("fail.html"); }：

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

或没有

两者都比您输入的内容更易读。如果您的条件阻止是多行的，那么您当然必须使用}和if( condition ) { // line 1 // line 2 }。

condition

这意味着如果function load(url) { location href=url; }为真，将执行line1和line2。

现在，功能用法。你用过了

location.href

此功能不起作用。它会给你一个运行时错误。 onclick是您所需要的。如果要使用本机JavaScript函数，请确保已正确命名。

回到你的问题。您想要在单击按钮时检查输入的数据。这可以通过使用＆＃34; events＆＃34;来实现。您已在按钮标记中使用<input type="submit" value="Login" onclick="validate()" />

onclick

不用担心，这会奏效。（我只是不喜欢这种风格）。如果单击该按钮，它将运行＆＃34; validate（）＆＃34;功能。无需添加＆＃34; javascript＆＃34;在它之前。 DOM可以处理它。函数名称及其参数必须与

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

属性中输入的字符串相同。如果您不这样做，脚本将搜索不存在的函数，从而导致错误。由于我们使用不带参数的validate，我们必须重新定义函数，如下所示。

text1

请注意document.getElementById()是变量，必须进行定义。由于这些都不是通过methods参数传递的，因此您必须选择输入标记，以确保您可以获得所需的数据。这可以通过var text1 = document.getElementById("username");函数来完成，该函数按其id选择一个元素。

id="username"

这说＆＃34;通过id：username＆＃34;获取元素。请查看示例的HTML部分。您可以发现input元素具有document.getElementById属性。

但我们还没有！函数.value为您提供具有给定ID的元素的节点。由于元素是输入字段，因此您可以使用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"); } }属性来获取其当前值。对text2（密码字段，然后你有一个工作函数！）执行相同的操作！

getElementByClassName

还有其他方法可以在文档中选择代码：querySelector，querySelectorAll，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; }等。请检查其工作原理的文档。

这就是确保代码正常运行所需的全部内容。如果您想了解有关javascript的更多信息，请阅读此documentation。或者使用此tutorial开始学习基础知识。

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

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

完整示例

＆＃13;

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

＆＃13;

<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>

＆＃13;

{{1}}

＆＃13;

Answer 3

代码中有（很多）错误：

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

test1和test2不存在。

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

location href=url;应为location.href=url;

然而，在一天结束的时候，即使你使用了这个＆＃34;安全＆＃34;将是微不足道的四处走动;任何人都可以查看页面的来源并查看用户名和密码。

Answer 4

＆＃13;

<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>

＆＃13;

HTML中的用户名和密码验证

4 个答案:

关于HTML

关于CSS

关于JavaScript

完整示例