HTML中的用户名和密码验证

VIN*_*S G 1 html javascript

下面的代码应该验证用户名和密码,如果正确应该运行"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>
Run Code Online (Sandbox Code Playgroud)

MT0*_*MT0 8

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

除此之外...

  • 使用css更改元素的表示而不是像html元素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>
Run Code Online (Sandbox Code Playgroud)