html+JQuery登录实例

互联网 18-5-16
本篇文章主要介绍用html和JQuery制作登录网页的实例，感兴趣的朋友参考下，希望对大家有所帮助。
代码如下：
<!DOCTYPE html>  <html lang="en"><head>      <meta charset="UTF-8">      <title>login</title>      <script type="text/javascript" src="../pagejs/bootstrap.min.js" ></script>      <script type="text/javascript" src="../pagejs/jquery-2.1.4.min.js"></script>      <link rel="stylesheet" type="text/css" href="../pagecss/bootstrap.min.css"/>        <script type="text/javascript">          function showmsg(msgdata) {              $("#msginfo").hide();              $("#msginfo").html("<b>" + msgdata + "</b>");              $("#msginfo").show(1000);          }            $().ready(function() {              $("#login").click(function() {                  var user = $("#inputEmail").val();                var pwd = $("#inputPassword").val();                if (user == "" || pwd == "") {                      showmsg("please input email and password");                    return;                  }                    $.post("login.do", {                      email:user,                      pwd:pwd                  },                function(data, status){                      if (data == "loginok") {                          location.href = "welcome.jsp";                      } else {                          showmsg(data);                      }                  });              });          })    </script></head><body><p class="container">      <p class="row clearfix">          <p class="col-md-12 column">              <ul class="breadcrumb">                  <li>                      <a href="../index.html">Home</a>                  </li>                  <li class="active">                      LOGIN                </li>              </ul>          </p>      </p></p><p class="container">      <p class="row clearfix">          <p class="col-md-2 column">              <p style="height:100px;clear:both"></p>              <img alt="140x140" src="../image/icon.jpg" class="img-circle" style="width:160px;height:160px" />          </p>          <p class="col-md-6 column">              <p class="page-header">                  <h1>                      Welcome to Sp4 System                </h1>              </p>              <form class="form-horizontal" role="form" id="login_form" action="login.do" method="post">                  <p class="form-group">                      <label for="inputEmail" class="col-sm-2 control-label">Email</label>                      <p class="col-sm-10">                          <input type="email" class="form-control" id="inputEmail" name="email" />                      </p>                  </p>                  <p class="form-group">                      <label for="inputPassword" class="col-sm-2 control-label">Password</label>                      <p class="col-sm-10">                          <input type="password" class="form-control" id="inputPassword" name="pwd" />                      </p>                  </p>                  <p class="form-group">                      <p class="col-sm-offset-2 col-sm-10">                          <p class="checkbox">                              <label><input type="checkbox" />Remember me</label>                          </p>                      </p>                  </p>                  <p class="form-group">                      <p class="col-sm-offset-2 col-sm-2">                          <button id="login" type="button" class="btn btn-default">Sign in</button>                      </p>                      <p class="col-sm-8">                          <h4 id="msginfo"></h4>                      </p>                  </p>              </form>              </p>          <p class="col-md-4 column">          </p>      </p></p></body>  </html>
html+JQuery登录实例

相关资讯

标签推荐
