<!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>
使AJAX异步验证用户名和密码
最新推荐文章于 2021-02-12 09:05:22 发布