以下用jQuery, ajax 和 php完成服务器端对用户输入的验证:
前端代码如下
实例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>php 处理表单</title> <style type="text/css"> table{ background-color: wheat; box-shadow: 3px 3px 3px #888; border-radius: 15px; padding: 15px; margin: 30px auto; } table td{ padding: 8px; } table caption{ font-size: 1.5em; margin-bottom: 10px; } textarea{ resize: none; } form button{ width: 100px; height: 30px; border: none; background-color: skyblue; color: white; } form button:hover{ background-color: orangered; font-size: 1.1em; cursor: pointer; } </style> </head> <body> <form> <table> <caption>register</caption> <tr> <td><label for="email">email:</label></td> <td><input type="text" name="email" id="email" autofocus=""></td> </tr> <tr> <td><label for="password1">password:</label></td> <td><input type="password" name="password1" id="password1"></td> </tr> <tr> <td><label for="password2">comfirm your password:</label></td> <td><input type="password" name="password2" id="password2"></td> </tr> <tr> <td><label for="sex">Gender:</label></td> <td> <input type="radio" name="gender" id="male" value="male"><label for="male">Male</label> <input type="radio" name="gender" id="female" value="female"><label for="female">Female</label> <input type="radio" name="gender" id="secret" value="secret" checked><label for="secret">secret</label> </td> </tr> <tr> <td><label for="level">level:</label></td> <td> <select name="level" id="level"> <option value="0">Junior</option> <option value="1" selected>Middle</option> <option value="2">Senior</option> </select> </td> </tr> <tr> <td><label for="php">language:</label></td> <td> <input type="checkbox" name="language" id="php" checked><label for="php">php</label> <input type="checkbox" name="language" id="java" ><label for="java">java</label> <input type="checkbox" name="language" id="python" ><label for="python">python</label> <input type="checkbox" name="language" id="C" ><label for="C">C</label> </td> </tr> <tr> <td><label for="comment"></label</td> <td> <textarea name="comment" id="comment" rows="3" cols="20"></textarea> </td> </tr> <tr> <td colspan="2" align="center"> <button type="submit" name="submit" id="submit" value="submit">Submit</button> </td> </tr> </table> </form> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> //using ajax to compelete the form valiadation, using post method //1.email validation $('#email').blur(function () { //using post method //在URL里面加上参数 让服务器端的php能够判断验证的是什么 $.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','green') break; } },'json') }) //2.密码验证 $('#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() } else { $('td').find('span').remove() } }, 'json') }) //3.确认密码 $('#password2').blur(function () { if ( $('#email').val().length == 0 || $('#password1').val().length == 0){ return false; } //把数据写成json把数据传到php $.post('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') }) //4.确认文字域 $('#comment').blur(function () { if ( $('#email').val().length == 0 || $('#password1').val().length == 0 || $('#password2').val().length == 0 ) { return false; } $.post('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 if (data.status == 1) { $('td').find('span').remove() $('#comment').after('<span>').next().text(data.msg).css('color','red').prev().focus() } else if (data.status == 2) { $('td').find('span').remove() $('#comment').after('<span>').next().text(data.msg).css('color','green') } }, 'json') }) </script> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
php服务器端代码如下:
实例
<?php /** * Created by PhpStorm. * User: hongda * Date: 17/04/2018 * Time: 10:58 PM */ //echo '<pre>'; //print_r($email); //echo $_GET['check']; //using the value of check from url to decide which input should be validated switch ($_GET['check']){ //validate email case 'email': //get the value of email $email=$_POST['email']; //determine if the value of email is empty if (empty($email)){ //using json_encode() to return jason exit(json_encode(['status'=>0,'msg'=>'email should not be empty!'])); } //determine if the value of email is admin else if (in_array($email,['admin@php.cn','hongda@php.cn'])){ exit(json_encode(['status'=>1,'msg'=>'This email cannot be used!'])); } //return right message if users` input is legal else { exit(json_encode(['status'=>2,'msg'=>'you can use this email!'])); } break; //validate password1 case 'password1': //get the value of password1 $password1=$_POST['password1']; //determine if the value of password1 is empty if (empty($password1)){ //using json_encode() to return jason exit(json_encode(['status'=>0,'msg'=>'password should not be empty!'])); } //return right message if users` input is legal else { exit(json_encode(['status'=>1,'msg'=>'you can use this password!'])); } break; //validate confirm password case 'password2': //get the value of password1 and password2 $password1=$_POST['password1']; $password2=$_POST['password2']; //determine if the value of password2 is empty if (empty($password2)){ //using json_encode() to return jason exit(json_encode(['status'=>0,'msg'=>'confirm password should not be empty!'])); } //determine if the value of password1 is not equal to password2 else if ($password1 != $password2) { exit(json_encode(['status'=>1,'msg'=>'confirm password doesnot match first password'])); } //return right message if users` input is legal else { exit(json_encode(['status'=>2,'msg'=>'password valiadation has passed'])); } break; //validate comment case 'comment': //get the value of password1 and comment $comment=$_POST['comment']; //determine if the value of comment is empty if (empty($comment)){ //using json_encode() to return jason exit(json_encode(['status'=>0,'msg'=>'text area should not be empty!'])); } //determine if the length of comment is less or equal to 10 else if (strlen($comment) <= 10 ) { exit(json_encode(['status'=>1,'msg'=>'text area too short input!'])); } //return right message if users` input is legal else { exit(json_encode(['status'=>2,'msg'=>'text area valiadation has passed'])); } break; default: break; } ?>
运行实例 »
点击 "运行实例" 按钮查看在线实例
总结:
以上通过jQuery ajax 把用户输入的值传给 php进行验证,其中有很多小技巧:
比如在ajax异步传值给php的时候,用链接后面参数传给服务器端,这次的 blur事件触发的验证是验证用户输入的哪部分;
比如用switch语句来根据服务器端返回的json里的status来输出验证反馈给用户。