简单用JQ+PHP+Ajax实现表单验证用户名及密码

  1. <html><head>
  2. <meta charset="utf-8">
  3. <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
  4. <script type="text/javascript" src="a.js"></script>
  5. <style type="text/css">
  6. body { font:12px/1.6em "宋体" }
  7. ul { list-style:none; }
  8. li { margin-top:10px; }
  9. </style>
  10. </head>
  11. <body>
  12. <h3>会员登录</h3>
  13. <div id="login">
  14. <form method="post" action="login.php" id="form" name="form">
  15. <ul>
  16. <li>名字:<input type="text" name="user" id="user" size="16" maxlength="20"></li>
  17. <li>密码:<input type="password" name="pass" id="pass" size="16" maxlength="20"></li>
  18. <li>
  19. <input type="submit" style="border:0" />
  20. </li>
  21. <li id="confirm"></li>
  22. </ul>
  23. </form>
  24. </div>
  25. </body></html>
  1. $(document).ready(function(){
  2. $("#form").submit(function(){
  3. login();
  4. return false;
  5. });
  6. });
  7. function login(){
  8. var user = $("#user").val();
  9. var pass = $("#pass").val();
  10. if (user == ""){
  11. $("#confirm").text("请输入登录用户名");
  12. $("#user").focus();
  13. return false;
  14. }
  15. if(pass == ""){
  16. $("#confirm").text("请输入登录密码");
  17. $("#pass").focus();
  18. return false;
  19. }
  20. $.ajax({
  21. type: "POST",
  22. url: "login.php",
  23. data: "id=" + user + "&p=" + pass,
  24. beforeSend: function(){
  25. $("confirm").text("登录中,请稍候");
  26. },
  27. success: function(msg){
  28. if(msg == "success"){
  29. $("#confirm").text("登录成功,欢迎" + user + "回来!正在进入你的空间");
  30. }else {
  31. $("#confirm").text("没有此用户或者密码不正确!");
  32. }
  33. }
  34. });
  35. }
  1. <?php
  2. $p = isset($_POST["p"]) ? $_POST["p"] : $_GET["p"];
  3. $id = isset($_POST["id"]) ? $_POST["id"] : $_GET["id"];
  4. if($id == "admin" && $p == "admin"){
  5. echo ‘success‘;
  6. }
  7. ?>





郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。