toaster与bootstrap模态框使用问题

Question

问题是这样的，用户登录时，当没有输入用户名或密码时，用模态框或toaster提示用户输入用户名与密码，现在的问题是
我在检查函数里，控置模块框与toaster都是很快就自动消了？

function login(){
    var loginName= $("#loginName").val();
    var password=$("#password").val();
    if(loginName=="" || password==""){
         $("#exampleModal").modal("show");
        toastr.warning('用户名和密码不能为空！', '请输入用户名和密码');
    }
}

闪一下就没有了，模态框如果用不用js，而用按钮，就会很正常的显示，用上面的js就是不行，而toaster就是闪一下就没有了，但是toaster的代码如果放到loader函数里又是很正常的。请问这些什么问题？怎么解决？
真的有点郁闷

<button type="button" class="btn btn-primary " data-toggle="modal" data-target="#exampleModal">Default modal</button>

这个是页面的html代码

<div class="bg-primary">
    <div id="app">
        <section class="section section-2">
            <div class="container">
                <div class="row">
                    <div class="single-page single-pageimage construction-bg cover-image " data-image-src="../../Content/assets/img/news/img14.jpg">
                        <div class="row">
                            <div class="col-lg-3"></div>
                            <div class="col-lg-6">
                                <div class="wrapper wrapper2">
                                    <form id="login" class="card-body" tabindex="500">
                                        <h3>请登录</h3>
                                        <div class="mail">
                                            <input type="text" name="loginName" id="loginName">
                                            <label>登录名</label>
                                        </div>
                                        <div class="passwd">
                                            <input type="password" name="password" id="password">
                                            <label>密码</label>
                                        </div>
                                        <button class="btn btn-primary btn-block" onclick="login()">登录</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</div>

Answer 1

因为form表单提交后会自动跳转，所以当表单数据不通过，应该阻止页面跳转。

function login(){
    
    var loginName= $("#loginName").val();
    var password=$("#password").val();
    if(loginName=="" || password==""){
        event.preventDefault();   //阻止页面跳转
        $('#myModal').modal("show");
        toastr.warning('你有新消息了！');
    }
    
  }

Answer 2

这个是页面的html代码

<div class="bg-primary">
    <div id="app">
        <section class="section section-2">
            <div class="container">
                <div class="row">
                    <div class="single-page single-pageimage construction-bg cover-image " data-image-src="../../Content/assets/img/news/img14.jpg">
                        <div class="row">
                            <div class="col-lg-3"></div>
                            <div class="col-lg-6">
                                <div class="wrapper wrapper2">
                                    <form id="login" class="card-body" tabindex="500">
                                        <h3>请登录</h3>
                                        <div class="mail">
                                            <input type="text" name="loginName" id="loginName">
                                            <label>登录名</label>
                                        </div>
                                        <div class="passwd">
                                            <input type="password" name="password" id="password">
                                            <label>密码</label>
                                        </div>
                                        <button class="btn btn-primary btn-block" onclick="login()">登录</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</div>