2013-12-12 251 views
-1

我有一個頁面有一個字段和一個按鈕。 我需要,如果輸入等於預先定義的密碼,那麼它會在屏幕上顯示一些文本。 我不是一個HTML專家,這就是爲什麼問這裏。 與此同時,我現在只有這個...HTML密碼驗證

<!DOCTYPE html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 
<title>Welcome</title> 
</head> 

<body> 
    <div id="wrapper"> 
    <a rel="tooltip" align = "center" class="btn-success\" href="#"></a> 
    <form> 
     <input type="text" /> 
     <input type="submit" /> 
    </form> 
    </div> 


</body> 
</html> 

謝謝!

編輯: 我也想問一個PHP更安全的解決方案。 謝謝!

+0

你不能單獨使用HTML。 Javascript會這樣做,但在JavaScript客戶端編寫安全限制是完全沒有意義的。所以你在這裏需要一些服務器端語言,由於有無數的選擇,所以我們不能幫助你。 – deceze

+3

**從來沒有**在客戶端做密碼驗證。使用服務器端腳本來做到這一點(PHP,ASP.NET,...)。在客戶端驗證密碼是一個**巨大**安全漏洞 – RononDex

+0

找到合適的答案從此..... https://www.google.co.in/search?q=html+code+to+check+password&oq = html + pasword + chec&aqs = chrome.3.69i57j0l5.11176j0j7&sourceid = chrome&espv = 210&es_sm = 93&ie = UTF-8 –

回答

3

THIS FIDDLE。我不會涵蓋在其他方面提出的有關最佳實踐和服務器端驗證的相同觀點 - 這些應該在現在已經清楚了。

在文本框中鍵入myValue以查看隱藏文本。

JQ

$('input[type=text]').keyup(function() { 
    $(this).val() == 'myValue' ? $('span').show() : $('span').hide(); 
}); 

HTML

<input type="text" /> 
<span>Hidden Text</span> 

CSS

span{ 
    display:none; 
} 
1

我想你是初學者,你只是想嘗試一些例子,所以嘗試下面的代碼,但讓我告訴你永遠不要用javascript檢查密碼!

<!DOCTYPE html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 
<title>Welcome</title> 
</head> 
<script> 
var preDefinedWord = "test123"; 
function checkMyWord() 
{ 
    if(document.getElementById("myword").value == preDefinedWord) 
    { 
     alert("its the same"); 
    } 
    else 
    { 
     alert("not the same"); 
    } 
} 
</Script> 
<body> 
    <div id="wrapper"> 
    <a rel="tooltip" align = "center" class="btn-success\" href="#"></a> 
    <form> 
     <input id="myword" type="text" /> 
     <input onclick="checkMyWord()" type="button" /> 
    </form> 
    </div> 


</body> 
</html> 
2

爲此使用服務器端語言。例如PHP。在HTML中做這樣的事情是完全錯誤的。不要將JavaScript用於安全操作 - 它可以在客戶端瀏覽/編輯。

但是如果你堅持(你不應該!),你可以用JavaScript做到這一點:

<!DOCTYPE html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 
<title>Welcome</title> 
</head> 

<body> 
    <div id="wrapper"> 
    <a rel="tooltip" align = "center" class="btn-success\" href="#"></a> 
    <form onsubmit="checkPassword()"> 
     <input type="text" name="passwd"/> 
     <input type="submit" /> 
    </form> 
    </div> 

<script type="text/javascript"> 

    function checkPassword(){ 
     if(document.getElementByName('passwd').value == "topSecretPassword"){ 
      alert("Good!"); 
     }else{ 
      alert("Bad :("); 
     } 
    } 

</script> 

2

您可以使用HTML和Javascript的組合,做你想做的。將您的輸入框更改爲

<script type="text/javascript"> 
    function validate(){ 
     if(document.getElementById("my-field").value == "password"){ 
      document.getElementById("my-div").style.display = "block"; 
</script> 

<input type="text" id="my-field" /> 
<button onclick="validate();">Submit</button> 

<div id="my-div">Some hidden text here.</div> 

希望有所幫助。