JQuery切换（）和自动刷新/渲染

封闭了一段我的代码。我希望实现最简单的身份验证机制。有两个输入字段，用户和密码。点击发送按钮时，验证（）函数被调用时，它检查用户名和密码是否均为“管理员”，如果它拥有然后它显示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(); 
}

来源

2011-11-22 MrIzik

你的问题在哪里？ – ManseUK

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

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

首先作为@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/

来源

2011-11-22 14:47:09 ManseUK

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

BRILLIANT！非常感谢。 – MrIzik

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

如果如果您清爽可以使用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答案，他是对有关事件，如果你想捕捉提交的，而不是点击输入

来源

2011-11-22 14:47:00 NicoSantangelo

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

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

尼科斯答案有逻辑正确，但不要将点击事件添加到提交按钮，因为当用户在表单上按下输入时不会触发（无论如何这些日子你都不应该这样做），在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(); 
});

来源

2011-11-22 15:02:13 Dunhamzzz

JQuery切换（）和自动刷新/渲染

回答

相关问题