Question

我是Javascript和JQuery的新手，我想创建一个基本的社交网站。我被卡在了登录页面上。我基本上希望网站做的是当你点击登录时会弹出一个对话框，说你的密码和用户名不正确，两个按钮说出注册和取消。我知道你可以使用JQuery Dialog UI做到这一点，但我正在努力做到这一点。这些是我的HTML，Javascript和CSS页面。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <title>Login</title>
        <link rel="stylesheet" href="css/login.css">
        <!-- include the jquery library -->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

        <!-- include the jquery ui library -->
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

<script>
 // show the dialog when submit is clicked and checked
 function showDialog(){
    /* select the div you want to be a dialog, in our case it is 'basicModal'
    you can add parameters such as width, height, title, etc. */
    $( "#basicModal" ).dialog({
        modal: true,
        title: "Are you sure?",
        buttons: {
            "YES": function() {
                window.open('signup.html');
            },
            "NO": function() {
                $( this ).dialog( "close" );
            }
        }
    });

});
</script>

        <script src="js/script.js"></script>


    </head>
<body>

<section class="loginform">  
<form name="login" action="" method="post" onsubmit="return check(login)" accept-charset="utf-8">  
    <ul>  
        <li><label for="usermail">Email</label>  
        <input type="username" name="username" placeholder="username" required></li>  
        <li><label for="password">Password</label>  
        <input type="password" name="password" placeholder="password" required></li>  
        <li>  
        <input type="submit" value="Login" ></li>  
    </ul>  
</form>  
</section>
    <!--
    -this is the actual dialog, yes, it is included in your html body, it is just hidden
    -we did not set the dialog 'title' here, we set it in the js parameter
-->
<div id="basicModal">
   You mad? Username and Password are not correct. Please sign up using the button below.
</div>



</body>
</html>

这是我的Javascript页面

function check(form) {
/*the following code checkes whether the entered email and password are matching*/



    if (form.username.value === "user" && form.password.value === "pass") {
        window.open('home.html'); /*opens the target page while Id & password matches*/
    } else {
        //alert("Password or Username Not Found. Please sign up."); /*displays error message*/
        showDialog();
    }

}

我的css

ul
{
    list-style-type: none;
}

.loginform {

    margin: 20% auto;
               width:200px;
}

/* dialog div must be hidden */
 #basicModal{
        display:none;
}

Answer 1

您需要return false函数中的check()来阻止表单提交：

function check(form) {
    /*the following code checkes whether the entered email and password are matching*/
    if (form.username.value === "user" && form.password.value === "pass") {
        window.open('home.html'); /*opens the target page while Id & password matches*/
    } else {
        //alert("Password or Username Not Found. Please sign up."); /*displays error message*/
        showDialog();
        return false;
    }
}

您还有语法错误。 );结尾处不应有showDialog()。

这是working fiddle

使用单独的JS文件时，JQuery UI对话框不显示

1 个答案: