1.前端用户注册表单,用table布局,用ajax的$.post()方法传递要验证的数据,用get方法传送标志。
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用户注册</title> <style type="text/css"> table { background-color: wheat; box-shadow: 3px 3px 3px #888; border-radius: 3%; padding: 15px; margin: 30px auto; } table td { padding: 4px; } table caption { font-size: 1.3em; margin-bottom: 10px; } textarea { resize: none; } form table button { width: 80px; height: 30px; cursor: pointer; border: none; background-color: skyblue; color: white; } form table button:hover { background-color: orangered; color: white; font-size:1.05em; } form table select{ height: 24px; } </style> </head> <body> <form id="register"> <table> <caption>用户注册</caption> <tr> <td><label for="email">邮箱:</label></td> <td><input type="email" name="email" id="email" autofocus=""></td> </tr> <tr> <td><label for="password1">密码:</label></td> <td><input type="password" name="password1" id="password1"></td> </tr> <tr> <td><label for="password2">确认:</label></td> <td><input type="password" name="password2" id="password2" placeholder="再次输入密码"></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> <input type="checkbox" name="lang[]" id="php" value="发动" checked><label for="php">发动</label> <input type="checkbox" name="lang[]" id="java" value="java"><label for="java">底盘</label> <input type="checkbox" name="lang[]" id="python" value="php"><label for="python">变速箱</label> <input type="checkbox" name="lang[]" id="c" value="c"><label for="c">杂项</label> </td> </tr> <tr> <td valign="top"><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="../jquery.js"></script> <script type="text/javascript"> //注册邮箱验证 $('#email').blur(function(){ $.post('admin/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', 'red').prev().focus(); break; case 3: //合法输入 $('td').find('span').remove() $('#email').after('<span>').next().text(data.msg).css('color', 'green') break; } },'json') }) //密码验证 $('#password1').blur(function(){ if ($('#email').val().length == 0) { return false } $.post('admin/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(); return false } },'json') }) //确认密码验证 $('#password2').blur(function(){ //邮箱或密码无输入处理,避免出现无限制请求,陷入死循环 if ($('#email').val().length == 0 || $('#password1').val().length == 0) { return false } $.post('admin/check.php?check=password2', { password1: $('#password1').val(), password2: $('#password2').val() }, function(data){ if (data.status == 0 ) { $('td').find('span').remove() $('#password2').after('<span>').next().text(data.msg).css('color', 'red') $('#password1').focus() //焦点定位到password1 } else { $('td').find('span').remove() $('#password2').after('<span>').next().text(data.msg).css('color', 'green') } },'json') }) //简介验证 $('#comment').blur(function(){ if ($('#email').val().length == 0 || $('#password1').val().length == 0 || $('#password1').val().length == 0) { return false } $.post('admin/check.php?check=comment', 'comment='+$('#comment').val(), function(data){ if(data.status == 0) { $('td').find('span').remove() $('#comment').after('<span>').next().text(data.msg).css('color', 'red').prev().focus(); } else { $('td').find('span').remove() $('#comment').after('<span>').next().text(data.msg).css('color', 'red').prev().focus(); } },'json') }) //提交数据 $('#submit').click(function(){ $.post('admin/check.php?check=submit', $('#register').serialize(), function(data){ $('td').find('span').remove() alert(data) },'text') }) </script> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
2.后台验证代码,用系统变量_POST和_GET获取前端传递的表单数据及标志,然后将验证结果(标志dtatus,信息msg)返送前端。
实例
<?php // echo '<pre>'; // print_r($_POST); switch ($_GET['check']) { //验证邮箱 case 'email': $email = $_POST['email']; if (empty($email)) { exit(json_encode(['status'=>0,'msg'=>'邮箱不能为空'])); } else if(!isEmail($email)) { exit(json_encode(['status'=>1,'msg'=>'邮箱格式错误'])); } else if (in_array($email, ['admin@php.cn','zhu@php.cn'])){ exit(json_encode(['status'=>2,'msg'=>'邮箱已被注册'])); } else { exit(json_encode(['status'=>3,'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 ($password1 != $password2){ exit(json_encode(['status'=>0,'msg'=>'输入不一致'])); } else { exit(json_encode(['status'=>1,'msg'=>'验证通过'])); } break; //简介验证,非空与字符长度同时验证,字符小于10包括0 case 'comment': $comment = $_POST['comment']; if (mb_strlen(trim($comment)) < 10) { exit(json_encode(['status'=>0,'msg'=>'请填入不少于10个字符的内容'])); } else { exit(json_encode(['status'=>1,'msg'=>'通过'])); } break; //提交验证 case 'submit': exit('恭喜,注册成功'); } // 验证邮箱格式 function isEmail($email) { $mode = '/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/'; if(preg_match($mode,$email)){ return true; } else { return false; } }
运行实例 »
点击 "运行实例" 按钮查看在线实例
3.运行效果截图