Question

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

Answer 1

见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;
}

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

Answer 3

您可以结合使用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>

希望有所帮助。

Answer 4

我猜你是初学者，你只是尝试了一些例子，所以请尝试以下代码，但是让我告诉你永远不要用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>

HTML密码验证

4 个答案: