Fatal编程技术网

Javascript HTML密码验证

javascript jquery css html

Javascript HTML密码验证,javascript,jquery,css,html,Javascript,Jquery,Css,Html,我有一个页面，有一个字段和一个按钮。 我需要的是，如果输入等于一个预定义的密码，那么它会在屏幕上显示一些文本。 我不是html专家，这就是为什么在这里问这个问题。 同时我现在只有这个 <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Welcome</title> </head>

我有一个页面，有一个字段和一个按钮。 我需要的是，如果输入等于一个预定义的密码，那么它会在屏幕上显示一些文本。 我不是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更安全的解决方案。
谢谢

我猜您是一名初学者，您只是在尝试一些示例，因此请尝试以下代码，但我要告诉您，永远不要使用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>
为此使用服务器端语言。例如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>
请参见。关于最佳实践和服务器端验证，我将不讨论其他地方提出的相同观点——这些问题现在应该已经清楚了

在文本框中键入myValue以查看隐藏文本

jQ

HTML

您可以使用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>
希望这能有所帮助。

单凭HTML无法做到这一点。Javascript可以做到这一点，但在Javascript客户端编写安全限制完全没有意义。所以您需要一些服务器端语言，我们无法帮助您，因为有无限多的选择。永远不要在客户端进行密码验证。使用服务器端脚本来实现这一点，如PHP、ASP.NET等。。。。在客户端验证密码是一个巨大的安全漏洞。从中找到合适的答案。。。。。谢谢你们的帮助。我的这个网站实际上只是一个演示，所以安全问题在这里不是一个真正的交易。很难，我想看看你的一些例子，因为我在这里完全迷糊了。谢谢为了避免更多的负面投票，我建议结束这个问题。。。 
<input type="text" />
<span>Hidden Text</span>

span{
    display:none;
}

<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>