登录

button的情势:<input type="button" id="login" class="btn btn-main" value="登录">

<link rel="stylesheet" href="/css/plugins/toastr/toastr.min.css">
<script src="/js/jquery.min.js"></script>
<script src="/js/plugins/toastr/toastr.min.js"></script>

$(function(){
    $("#login").click(function(){
        if($.trim($("#username").val()) != "" && $.trim($("#password").val()) != ""){
            login();
        }else{
            if ($.trim($("#username").val()) == ""){ 
                toastr.error("请输入用户名!");
                $("#username").focus();
            }else if ($.trim($("#password").val()) == ""){ 
                toastr.error("请输入暗码!");
                $("#password").focus();
            }
        }
    })
    keypresslogin();
})

//enter回车键登录
function keypresslogin(){
    $('#password').bind('keypress', function(event) {
        if (event.keyCode == "13")
        {
            login();
        }
    });
}
function login(){
    $.ajax({
        type: "POST",
        url: "/login",
        data: {
            username:$("#username").val(),
            password:$("#password").val()
        },
        success: function (r) {
            if (r.code == 0) {
                toastr.success("登录胜利!");
                window.location.href='/main';
            } else {
                toastr.error(r.msg);
            }
        },
    });
}
submit的情势:<input type="submit" class="btn btn-main" value="登录">
<link rel="stylesheet" href="/css/plugins/toastr/toastr.min.css">
<script src="/js/jquery.min.js"></script>
<script src="/js/plugins/toastr/toastr.min.js"></script>
<script src="/js/plugins/validate/jquery.validate.min.js"></script>

<script>
        $(function(){
            function validateRule() {
                  $("#login").validate({
                      submitHandler : function() {
                          login();
                    }
                  }); 
            }
            validateRule();
            
            //enter回车键登录
            function keypresslogin(){
                $('#password').bind('keypress', function(event) {
                    if (event.keyCode == "13"){
                        validateRule();
                    }
                });
            }
        })
        
        function login(){
            var username=$.trim($("#username").val());
            var password=$.trim($("#password").val());
            if (username == ""){ 
                toastr.error("请输入用户名!");
                $("#username").focus();
            }else if (password == ""){ 
                toastr.error("请输入暗码!");
                $("#password").focus();
            }else{
                var loginInfo = $('#login').serialize();
                $.ajax({
                    cache : true,
                    type : "POST",
                    url : "/login",
                    data : loginInfo, 
                    async : true,
                    error : function(request) {
                        toastr.error("Connection error");
                    },
                    success : function(r) {
                        if (r.code == 0) {
                            toastr.success("登录胜利!");
                            window.location.href='/main';
                        } else {
                            toastr.error(r.msg);
                        }
                    }
                });
            }
        }
</script>
    原文作者:学问思辨行
    原文地址: https://segmentfault.com/a/1190000018769354
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞