总结:
前段:
1请求邮箱验证
2密码验证
3确认密码验证
4备注验证
php:
1请求邮箱验证
2密码验证
3确认密码验证
4备注验证
跟前端的一样,都需要验证
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> table{ background-color: #f0f8ff; border-radius: 5%; box-shadow: 3px 3px 3px #888; padding: 15px; margin:30px auto; } table td{ padding: 10px; } table caption{ font-size: 1.2em; margin-bottom: 10px; } form table button{ width: 100px; height: 30px; cursor: pointer; border: none; background-color: #00ffff; color: white; } textarea{ resize: none; } form table button:hover { background-color: blue; color: white; font-size: 1.2em; } </style> </head> <body> <form action="check.php" method="post"> <table> <caption>用户注册</caption> <tr> <td><label for="email">邮箱:</label></td> <td><input type="text" name="email" id="email" value="" autofocus=""></td> </tr> <tr> <td><label for="password1">密码:</label></td> <td><input type="password1" name="password1" id="password1"></td> </tr> <tr> <td><label for="password2">确认:</label></td> <td><input type="password2" name="password2" id="password2"></td> </tr> <tr> <td><label for="secret">性别:</label></td> <td> <!-- 单选与众不同,点击标签会自动选择默认值 --> <input type="radio" name="gender" id="male" value="male" ><label for="male">男</label> <input type="radio" name="gender" id="female" value="female"><label for="female">女</label> <input type="radio" name="gender" id="secret" value="secret" checked="" ><label for="secret">保密</label> </td> </tr> <tr> <td><label for="level">级别</label></td> <td> <select name="level" id="level"> <option value="0">小白</option> <option value="1" selected="">中级</option> <option value="2">大神</option> </select> </td> </tr> <tr> <td><label for="php">语言:</label></td> <td> <!-- 点击标签会把php做为默认项之一选中 --> <input type="checkbox" name="lang[]" id="php" value="php" checked><label for="php">php</label> <input type="checkbox" name="lang[]" id="java" value="java"><label for="java">java</label> <input type="checkbox" name="lang[]" id="python" value="php"><label for="python">python</label> <input type="checkbox" name="lang[]" id="c" value="c"><label for="c">c</label> </td> </tr> <tr> <td valign="middle"><label for="comment">简介:</label></td> <td><textarea name="comment" id="comment" rows="3" cols="30"></textarea></td> </tr> <tr> <td colspan="2" align="center"> <button type="submit" name="submit" id="submit" value="submit">提交</button> </td> </tr> </table> </form> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript"> //请求邮箱验证 $('#email').blur(function(){ $.post('./check.php?check=email','email='+$('#email').val(),function(data){ switch(data.status){ case 0: $('td').find('span').remove() $('#email').after('<span>').next().text(data.msg).css('color','red').prev().focus() break; case 1: $('td').find('span').remove() $('#email').after('<span>').next().text(data.msg).css('color','red').prev().focus() break; case 2: $('td').find('span').remove() $('#email').after('<span>').next().text(data.msg).css('color','blue') break; } },'json') }) //密码验证 $('#password1').blur(function(){ if ($('email').val().length == 0){ return false } $.post('./check.php?check=password1','password1='+$('#password1').val(),function(data){ if (data.status == 0) { $('td').find('span').remove() $('#password1').after('<span>').next().text(data.msg).css('color','red').prev().focus() } },'json') }) //确认密码 $('#password2').blur(function(){ if ($('#email').val().length == 0) { return false } $.post('admin/check.php?check=password2', { password1: $('#password1').val(), password2: $('#password2').val() }, function(data){ switch(data.status) { case 0: $('td').find('span').remove() $('#password2').after('<span>').next().text(data.msg).css('color', 'red').prev().focus(); break; case 1: $('td').find('span').remove() $('#password2').after('<span>').next().text(data.msg).css('color', 'red').prev().focus(); break; case 2: $('td').find('span').remove() $('#password2').after('<span>').next().text(data.msg).css('color', 'green') break; } },'json') }) //备注验证 $('#comment').blur(function(){ $.post('./check.php?check=comment','comment='+$('#comment').val(),function(data){ switch(data.status){ case 0: $('td').find('span').remove() $('#comment').after('<span>').next().text(data.msg).css('color','red') case 1: $('td').find('span').remove() $('#comment').after('<span>').next().text(data.msg).css('color','red') break; case 2: $('td').find('span').remove() $('#comment').after('<span>').next().text(data.msg).css('color','blue') break; } },'json') }) </script> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<?php //echo '<pre>'; //print_r($_POST); //echo $_GET['check']; switch ($_GET['check']) { case 'email': $email = $_POST['email']; // 设置默认值 if (empty($email)) { exit(json_encode(['status'=>0,'msg'=>'邮箱不能为空'])); } else if (in_array($email,['123456@qq.com','111111@qq.com'])){ exit(json_encode(['status'=>1,'msg'=>'邮箱已占用'])); } else { exit(json_encode(['status'=>2,'msg'=>'可以注册'])); } break; case 'password1': $password1 = $_POST['password1']; // 设置默认值 if (empty($password1)) { exit(json_encode(['status'=>0,'msg'=>'密码不能为空'])); } break; //验证确认密码 case 'password2': $password1 = $_POST['password1']; $password2 = $_POST['password2']; if (empty($password2)) { exit(json_encode(['status'=>0,'msg'=>'确认不能为空'])); } else if ($password1 != $password2){ exit(json_encode(['status'=>1,'msg'=>'二次密码不相等'])); } else { exit(json_encode(['status'=>2,'msg'=>'验证通过'])); } break; case 'comment': //验证备注 $comment = $_POST['comment']; // 设置默认值 if (empty($comment)) { exit(json_encode(['status'=>0,'msg'=>'备注不能为空'])); } else if ($('#email').val().length <= 40){ exit(json_encode(['status'=>1,'msg'=>'备注不能少于40个字'])); } else { exit(json_encode(['status'=>2,'msg'=>'验证通过'])); } break; }
运行实例 »
点击 "运行实例" 按钮查看在线实例