2011-11-22 51 views
0

封闭了一段我的代码。 我希望实现最简单的身份验证机制。 有两个输入字段,用户密码。 点击发送按钮时,验证()函数被调用时,它检查用户名密码是否均为“管理员”,如果它拥有然后它显示isCorrect DIV和isWrong否则为JQuery切换()和自动刷新/渲染

谢谢!

的test.html

<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="test.css"/> 
     <script src="jquery-1.7.js"></script> 
     <script src="test.js"></script> 
    </head> 

    <body> 
     <form class="header"> 
      Username: <input type="textbox" tabindex="1" id="username"/> 
      Password: <input type="password" tabindex="2" id="password"/> 
      <input type="submit" value="Send" tabindex="3" id="send" onclick="verify()"/> 
     </form> 

     <div id="isCorrect">correct!</div> 
     <div id="isWrong">wrong!</div> 
    </body> 
</html> 

test.css

#isCorrect { display: none; } 
#isWrong { display: none; } 

test.js

function verify() { 
    var username = $("#username").val(); 
    var password = $("#password").val(); 
    if (username == "admin" && password == "admin") 
     $("#isCorrect").toggle(); 
    else 
     $("#isWrong").toggle(); 
} 
+0

你的问题在哪里? – ManseUK

+3

请不要使用此方法进行身份验证,它根本不安全,用户名和密码将在页面的源代码中可见! – Dunhamzzz

+0

目标已经实现,但不能被注意到,因为看起来页面以某种方式被刷新到之前的状态。 – MrIzik

回答

0

首先作为@Dunhamzzz指出的 - 这是非常不安全您的用户名和密码是在浏览器内可见....

如果你想保持在屏幕上,用户可以查看残局时代需要return false;到您的验证()函数的末尾:

function verify() { 
    $("#isCorrect").hide(); 
    $("#isWrong").hide(); 
    var username = $("#username").val(); 
    var password = $("#password").val(); 
    if (username == "admin" && password == "admin") 
     $("#isCorrect").show(); 
    else 
     $("#isWrong").show(); 
    return false; 
} 

,然后更新您的HTML:

<input type="submit" value="Send" tabindex="3" id="send" onclick="return verify()"/>

工作例如:http://jsfiddle.net/manseuk/ZyN93/

+0

,正如我上面提到的那样,它仍然不会显示相应的div。 – MrIzik

+0

BRILLIANT!非常感谢。 – MrIzik

+0

试试这个 - > http://jsfiddle.net/manseuk/ZyN93/ – ManseUK

1

如果如果您清爽可以使用jQuery来防止违约事件的页面,女巫在输入的情况下应该提交

jQuery("#send").click(function(e){ 

    var username = $("#username").val(); 
    var password = $("#password").val(); 

    e.preventDefault(); 
    if (username == "admin" && password == "admin") 
     $("#isCorrect").toggle(); 
    else 
     $("#isWrong").toggle(); 
}); 

如果你仍然想使用验证,你可以这样做:

<input type="submit" value="Send" tabindex="3" id="send"/> 

jQuery("#send").click(verify); //this binds the event 

function verify(e) { 
    e.preventDefault(); //this prevents the submit event 
    //your code 
} 

此外,检查Dunhamzzzs答案,他是对有关事件,如果你想捕捉提交的,而不是点击输入

+0

感谢您的回复,我试图将其粘贴到* verify()*方法中,并且也是在我的javascript中。与以前相同的结果。 – MrIzik

+0

如果您想使用此代码,则应删除onclick属性。通过这段代码,你可以通过javascript绑定click事件(例如,巫婆允许多个绑定)。我将编辑答案,以便您仍然可以使用验证 – NicoSantangelo

0

尼科斯答案有逻辑正确,但不要将点击事件添加到提交按钮,因为当用户在表单上按下输入时不会触发(无论如何这些日子你都不应该这样做),在jQuery中你可以添加一个提交处理器以整体形式如此:

$('form.header').submit(function(e) { 
    e.preventDefault(); // This stops the form actually submitting 

    var username = $("#username").val(); 
    var password = $("#password").val(); 

    if (username == "admin" && password == "admin") 
     $("#isCorrect").toggle(); 
    else 
     $("#isWrong").toggle(); 
});