2013-12-12 194 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> 

希望有所帮助。