Question

我最近开始涉及HTML＆amp; Javascript和我认为两者都是非常迷人的语言。然而，在我的旅途中，我遇到了一个我无法解决的错误。

基本上我正在尝试创建一个登录表单，我无法提交。

按钮（login.html）：

<button id="submit" type="button" onclick="verifyLogin()" class="btn btn-primary btn-lg btn-block">Login</button>

包含JS脚本（login.html）：

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

JavaScript（login.js）：

$(function() {
    var $formLogin = $('#login-form');
    var $formLost = $('#lost-form');
    var $formRegister = $('#register-form');
    var $divForms = $('#div-forms');
    var $modalAnimateTime = 300;
    var $msgAnimateTime = 150;
    var $msgShowTime = 2000;

    $("form").submit(function () {
        switch(this.id) {
            case "login-form":
                var $lg_username=$('#login_username').val();
                var $lg_password=$('#login_password').val();
                if ($lg_username == "ERROR") {
                    msgChange($('#div-login-msg'), $('#icon-login-msg'), $('#text-login-msg'), "error", "glyphicon-remove", "Login error");
                } else {
                    msgChange($('#div-login-msg'), $('#icon-login-msg'), $('#text-login-msg'), "success", "glyphicon-ok", "Login OK");
                }
                return false;
                break;
            case "lost-form":
                var $ls_email=$('#lost_email').val();
                if ($ls_email == "ERROR") {
                    msgChange($('#div-lost-msg'), $('#icon-lost-msg'), $('#text-lost-msg'), "error", "glyphicon-remove", "Send error");
                } else {
                    msgChange($('#div-lost-msg'), $('#icon-lost-msg'), $('#text-lost-msg'), "success", "glyphicon-ok", "Send OK");
                }
                return false;
                break;
            case "register-form":
                var $rg_username=$('#register_username').val();
                var $rg_email=$('#register_email').val();
                var $rg_password=$('#register_password').val();
                if ($rg_username == "ERROR") {
                    msgChange($('#div-register-msg'), $('#icon-register-msg'), $('#text-register-msg'), "error", "glyphicon-remove", "Register error");
                } else {
                    msgChange($('#div-register-msg'), $('#icon-register-msg'), $('#text-register-msg'), "success", "glyphicon-ok", "Register OK");
                }
                return false;
                break;
            default:
                return false;
        }
        return false;
    });

    $('#login_register_btn').click( function () { modalAnimate($formLogin, $formRegister) });
    $('#register_login_btn').click( function () { modalAnimate($formRegister, $formLogin); });
    $('#login_lost_btn').click( function () { modalAnimate($formLogin, $formLost); });
    $('#lost_login_btn').click( function () { modalAnimate($formLost, $formLogin); });
    $('#lost_register_btn').click( function () { modalAnimate($formLost, $formRegister); });
    $('#register_lost_btn').click( function () { modalAnimate($formRegister, $formLost); });

    function verifyLogin($email, $password){
        if($email === "admin" && $password === "1234"){
            alert("Login succesful");
        } else {
            alert("Could not login");
        }
    }

    function modalAnimate ($oldForm, $newForm) {
        var $oldH = $oldForm.height();
        var $newH = $newForm.height();
        $divForms.css("height",$oldH);
        $oldForm.fadeToggle($modalAnimateTime, function(){
            $divForms.animate({height: $newH}, $modalAnimateTime, function(){
                $newForm.fadeToggle($modalAnimateTime);
            });
        });
    }

    function msgFade ($msgId, $msgText) {
        $msgId.fadeOut($msgAnimateTime, function() {
            $(this).text($msgText).fadeIn($msgAnimateTime);
        });
    }

    function msgChange($divTag, $iconTag, $textTag, $divClass, $iconClass, $msgText) {
        var $msgOld = $divTag.text();
        msgFade($textTag, $msgText);
        $divTag.addClass($divClass);
        $iconTag.removeClass("glyphicon-chevron-right");
        $iconTag.addClass($iconClass + " " + $divClass);
        setTimeout(function() {
            msgFade($textTag, $msgOld);
            $divTag.removeClass($divClass);
            $iconTag.addClass("glyphicon-chevron-right");
            $iconTag.removeClass($iconClass + " " + $divClass);
        }, $msgShowTime);
    }
});

我意识到此功能暂时无效。我只是不知道出了什么问题。

最诚挚的问候，

Answer 1

您的代码中有很多错误，您必须仔细检查您的学习来源。首先是一个工作代码：

<script>
console.log("hi");
function verifyLogin($email, $password){
    var isValid = false;
    if($email === "admin" && $password === "admin"){
        alert("just logged in!");
        isValid = true;
    }
}
</script>

<button id="submit" type="button" onclick="verifyLogin('admin', 'admin')" class="btn btn-primary btn-lg btn-block">Login</button>

1）这一行：

boolean isValid = false;

在javascript中毫无意义。 boolean只是一个javascript数据类型，您正在寻找的语法是

var

它本身就是对内存中某个点的引用，该点可以包含一个布尔值，它是数据类型。

2）你的javascript代码应该高于html，因为javascript是同步的

3）所有这一行都是完全错误的：

if((email && password).equals("admin")){

你没有定义equals，你使用的语法不起作用。请放弃你想要学习和学习的任何来源：

http://www.tutorialspoint.com/javascript/

https://www.youtube.com/watch?v=Bv_5Zv5c-Ts

带有JS处理程序的按钮不提交表单

1 个答案: