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切換（）和自動刷新/渲染

回答

相關問題