1.login.html
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>电子相册</title> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <script type="text/javascript"> $(document).ready(function(){ $(':input').eq(0).blur(function(){ $.ajax({ url:'login_php/check.php?t=email', type:'GET', data:$('form').serialize(), success:function(msg,status,xhr){ // console.log(msg) $('#email').empty(); $('#email').append($(msg)); } }) }) $(':input').eq(1).blur(function(){ $.ajax({ url:'login_php/check.php?t=password', type:'GET', data:$('form').serialize(), success:function(msg,status,xhr){ // console.log(msg) $('#password').empty(); $('#password').append($(msg)); } }) }) }) </script> <style type="text/css"> .box{ margin:auto; width: 60%; border: 1px solid #9B9B9B; } </style> </head> <body> <div class="box"> <form class="form-horizontal"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">Email</label> <div class="col-sm-5"> <input type="email" class="form-control" id="inputEmail3" placeholder="Email" name="email"> </div> <div class="col-sm-5"> <span id='email'></span> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label">Password</label> <div class="col-sm-5"> <input type="password" class="form-control" id="inputPassword3" placeholder="Password" name="password"> </div> <div class="col-sm-5"> <span id='password'></span> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">Sign in</button> </div> </div> </form> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
2.服务器端 check.php
实例
<?php $email = $_GET['email']; $password = $_GET['password']; $type = $_GET['t']; if(strcmp(trim($type),"email")==0){ if (strlen(trim($email))==0) { echo '<span style="color:red">Email不能为空</span>'; }else if(strcmp(trim($email),"88")==0){ echo '<span style="color:red">Email地址已存在</span>'; }else{ echo '<span style="color:green">Email正确可以注册</span>'; } } if(strcmp(trim($type),"password")==0){ if (strlen(trim($password))==0) { echo '<span style="color:red">密码不能为空</span>'; }else{ echo '<span style="color:green">密码级别5颗星</span>'; } }
运行实例 »
点击 "运行实例" 按钮查看在线实例
3.手抄作业