Question

我正在尝试，如果用户名和密码在我的代码中更正，那么form1现在是隐藏的，而不是在同一个标签/窗口中显示form1，所以如果用户名和密码比下一页更正，请说明你好！登录，有什么办法，我能做到吗？我知道我可以创建另一个HTML，如果用户名和密码正确而不是显示html，我可以这样做，我想通过电子邮件发送html如果我发送两个HTML它将无法正常工作，是否有任何方式，我可以在一个html中做所有事情，如果用户名和密码正确，则显示隐藏的表格..请帮助我！谢谢！！

    <!DOCTYPE html>
<!-- saved from url=(0042)http://jsfiddle.net/DrydenLong/RHwLW/show/ -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  <title> - jsFiddle demo by DrydenLong</title>

  <script type="text/javascript" src="./- jsFiddle demo by DrydenLong_files/jquery-1.9.1.js"></script>



  <script type="text/javascript" src="./- jsFiddle demo by DrydenLong_files/jquery-ui.js"></script>
  <link rel="stylesheet" type="text/css" href="./- jsFiddle demo by DrydenLong_files/jquery-ui.css">

  <link rel="stylesheet" type="text/css" href="./- jsFiddle demo by DrydenLong_files/result-light.css">

  <style type="text/css">
    #hello, #sorry {
    display: none;
}
  </style>



<script type="text/javascript">//<![CDATA[ 
$(window).load(function(){
$(document).ready(function(){
    $("#my_button").click(function(){
        var userid = $("#user").val();
        var pass = $("#pass").val();
        if (userid == 'username' && pass == 'password') {
            $("#login").fadeOut('slow', function () {
            $("#hello").fadeIn();
        });
    } else {
        $("#login").fadeOut('slow', function () {
            $("#sorry").fadeIn();
        });
    }});});
});//]]>  

</script>


</head>
<body>
  <div id="login">
    <form name="login">Username
        <input type="text" name="userid" id="user">Password
        <input type="password" name="pswrd" id="pass">
        <input type="button" value="Login" id="my_button">
        <input type="reset" value="Cancel">
    </form>
</div>
<div id="hello">Hello! You are logged in.</div>
<div id="sorry">Sorry you have entered the wrong username or password</div>






</body></html>

请帮帮我!!谢谢！

Answer 1

好的，所以这使用Jquery / JqueryUI来隐藏/显示基于表单字段值的内容。根据值，相应的div会淡入视图：

HTML

<div id="login">
    <form name="login">Username
        <input type="text" name="userid" id="user" />Password
        <input type="password" name="pswrd" id="pass" />
        <input type="button" value="Login" id="my_button"/>
        <input type="reset" value="Cancel" />
    </form>
    </div>
    <div id="hello">Hello! You are logged in.</div>
    <div id="sorry">Sorry you have entered the wrong username or password</div>

CSS

#hello, #sorry {
    display: none;
}

Jquery的

$(document).ready(function () {
    $("#my_button").click(function () {
        var userid = $("#user").val();
        var pass = $("#pass").val();
        if (userid == 'username' && pass == 'password') {
            $("#login").fadeOut('slow', function () {
                $("#hello").fadeIn();
            });
        } else {
            $("#login").fadeOut('slow', function () {
                $("#sorry").fadeIn();
            });
        }
    });
});

现在，如果您希望自己的网站拥有安全内容，则此代码存在严重问题。任何人都可以查看您的页面的源代码并查看被隐藏的内容，从而无法使用密码来获取访问权限。如果你想要更好的安全性，你将不得不想办法改进。如果是这种情况，您可能需要查看服务器端脚本语言（如PHP）以解决安全问题。

如果安全性不是很大，而且用户名/密码更多用于显示div中的内容的体验，而不是内容，那么这应该没问题。

这是一个工作示例的小提琴：http://jsfiddle.net/DrydenLong/RHwLW/

用户名和密码匹配时，HTML，隐藏表单和显示表单

1 个答案: