使AJAX异步验证用户名和密码

最新推荐文章于 2022-06-20 14:34:14 发布

Z_ouyang

最新推荐文章于 2022-06-20 14:34:14 发布

阅读量1.3k

点赞数 1

分类专栏： javascript

本文链接：https://blog.csdn.net/Z_ouyang/article/details/50934515

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用AJAX异步验证用户名和密码</title>
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css"/>
    <script src="js/jquery.min.js"></script>
    <style>
        .headers{margin-top: 50px;}
        .am-tisi{color: #e4393c;}
    </style>
    <script>
        $(document).ready(function(){
            $("#an-submit").click(function(){
                checklogin();
            });

            function checklogin(){
                if($("#username").val()==''){
                    $("#usernametishi").html("用户名不能为空");
                    $("#username").focus();
                    setTimeout(function(){$("#usernametiss").html('')},1000);
                    return false;
                }else{
                    $("#usernametishi").html(''); //pwdtishi
                }
                if($("#password").val()==''){
                    $("#pwdtishi").html('密码不能为空');
                    $("#password").focus();
                    return false;
                }else{
                    $("#pwdtishi").html('');
                }
                $.ajax({//如果用户名密码都不为空,则异步发送ajax验证请求
                    type:"POST",
                    url:"validuser_Server.php",
                    data :"username="+$("#username").val().toString()+"&password="+$("#password").val().toString(),
                    success:function(data){
                        if(data=="1"||data==1){
                            alert("登录成功.");
                            return true;
                        }else{//反悔状态值2，则登录失败
                            alert("用户名密码错误");
                            $("#username").focus();
                            return false;
                        }
                    }
                })
            }
        });
    </script>
</head>
<body>
    <div class="container headers">
        <form class="form-horizontal">
            <div class="form-group">
                <div class="col-sm-2">用户名</div>
                <div class="col-sm-7">
                    <input class="form-control" id="username" placeholder="username"/>
                </div>
                <div class="col-sm-3 am-tisi" id="usernametishi">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2">密码</div>
                <div class="col-sm-7">
                    <input type="password" class="form-control" id="password" placeholder="password"/>
                </div>
                <div class="col-sm-3 am-tisi" id="pwdtishi">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <div class="checkbox">
                            <input type="checkbox"/>记住我
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button id="an-submit" type="button" class="btn btn-default">
                        登录
                    </button>
                </div>
            </div>
        </form>
    </div>
</body>
</html>

Z_ouyang

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
使AJAX异步验证用户名和密码

html>lang="en"> charset="UTF-8"> name="viewport" content="width=device-width, initial-scale=1.0"> 使用AJAX异步验证用户名和密码 rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.cs
复制链接

扫一扫