PHP AJAX 表单验证类

最新推荐文章于 2024-08-28 12:43:39 发布

原创最新推荐文章于 2024-08-28 12:43:39 发布 · 2.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#php #ajax #session #xmlhttprequest #validation #class

PHP 专栏收录该内容

36 篇文章

订阅专栏

本文介绍了一个企业在线注册系统的表单验证实现方案，包括前后端交互、AJAX实时验证及PHP后端验证流程。该系统利用PHP进行表单数据验证，并通过AJAX实现了即时反馈，提升了用户体验。

registerEnt.php

<?php include_once('header.php'); ?> <?php // initialize some session variables to prevent PHP throwing Notices if (!isset($_SESSION['values'])) { $_SESSION['values']['txtEmail'] = ''; $_SESSION['values']['txtPassword'] = ''; $_SESSION['values']['txtConfirmPassword'] = ''; $_SESSION['values']['txtEntName'] = ''; $_SESSION['values']['txtContactPerson'] = ''; $_SESSION['values']['txtPhone'] = ''; $_SESSION['values']['txtVerifyCode'] = ''; $_SESSION['values']['chkReadTerms'] = ''; } if (!isset($_SESSION['errors'])) { $_SESSION['errors']['txtEmail'] = 'hidden'; $_SESSION['errors']['txtPassword'] = 'hidden'; $_SESSION['errors']['txtConfirmPassword'] = 'hidden'; $_SESSION['errors']['txtEntName'] = 'hidden'; $_SESSION['errors']['txtContactPerson'] = 'hidden'; $_SESSION['errors']['txtPhone'] = 'hidden'; $_SESSION['errors']['txtVerifyCode'] = 'hidden'; $_SESSION['errors']['chkReadTerms'] = 'hidden'; } ?> <?php // For Debug... //echo $_SESSION['values']['txtPassword']; ?> <form id="frmRegistrerEnterprise" name="frmRegistrerEnterprise" method="post" action="../app/validateRegEnt.php?validationType=php"> <input name="serverAddress" id="serverAddress" type="hidden" value="validateRegEnt.php" /> <table width="1000" border="0" align="center" cellpadding="0" cellspacing="0"> <tbody> <tr> <td width="40"></td> <td align="left" valign="middle" bgcolor="#ffffff"><table border="0" cellpadding="0" cellspacing="0" height="24" width="100%"> <tbody> <tr> <td height="40" align="left" valign="bottom"><font style="font-size: 14px;" mce_style="font-size: 14px;" face="Verdana"><strong><b> <span class="14hao">帐号信息</span></b></strong></font><span class="14hao">|</span><span class="reg_3"><strong><font color="#ff6600">Welcome! </font></strong></span><span class="size12px">欢迎注册成为 www.xyspeed.com 企业会员！如在注册时遇到问题请联系我们</span> </td> </tr> <tr> <td class="bg-xuxian" height="1"></td> </tr> </tbody> </table> <br /> <table style="border-collapse: collapse;" mce_style="border-collapse: collapse;" border="0" bordercolor="#111111" cellpadding="4" cellspacing="0" width="100%"> <tbody>  <tr> <td width="100" align="left" bgcolor="#ffffff" class="size12px"> <font color="#ff6600">*</font><label for="txtUsername">电子邮件： </label> </td> <td width="883" align="left" bgcolor="#ffffff" class="size12px"> <input id="txtEmail" name="txtEmail" class="news" style="ime-mode: disabled;" mce_style="ime-mode: disabled;" onblur="validate(this.value, this.id)" value="<?php echo $_SESSION['values']['txtEmail'] ?>" /> <span id="divuserName"><font color="#624b35">( 请使用E-mail地址作为您登陆的用户名，例如：980576@qq.com ) </font></span> <span id="txtEmailFailed" class="<?php echo $_SESSION['errors']['txtEmail'];?>">( E-mail地址为空或不是正确的格式或者已经被注册)</span> </td> </tr>  <tr bgcolor="#fff9f4"> <td width="100" align="left" bgcolor="#FFFFFF" class="size12px"> <font color="#ff6600">*</font><label for="txtPassword">密　　码：</label> </td> <td height="20" align="left" bgcolor="#FFFFFF" class="size12px"> <input id="txtPassword" name="txtPassword" type="password" class="news" onblur="validate(this.value, this.id)" value="<?php echo $_SESSION['values']['txtPassword'] ?>" /> <span id="divpassword"><font color="#624b35">( 6~12个字符 )</font></span> <span id="txtPasswordFailed" class="<?php echo $_SESSION['errors']['txtPassword'] ?>">( 密码不能为空或请检查密码长度)</span> </td> </tr>  <tr> <td width="100" align="left" bgcolor="#ffffff" class="size12px"> <font color="#ff6600">*</font><font color="#000000"><label for="txtConfirmPassword">重复密码：</label></font> </td> <td height="20" align="left" bgcolor="#ffffff" class="size12px"> <input id="txtConfirmPassword" name="txtConfirmPassword" type="password" class="news" onblur="validate(this.value, this.id)" value="<?php echo $_SESSION['values']['txtConfirmPassword'] ?>" /> <span id="divconfirmPassword"><font color="#624b35">( 请再输入一遍密码 ) </font> </span> <span id="txtConfirmPasswordFailed" class="<?php echo $_SESSION['errors']['txtConfirmPassword'] ?>">( 重复密码不能为空或和原密码不一致)</span> </td> </tr> </tbody> </table> <br /> <table style="border-collapse: collapse;" mce_style="border-collapse: collapse;" border="0" bordercolor="#111111" cellpadding="4" cellspacing="0" width="100%"> <tbody>  <tr> <td width="89" align="left" nowrap="nowrap" bgcolor="#FFFFFF" class="size12px"> <font color="#ff6600">*</font><label for="txtEntName">公司名称：</label> </td> <td width="795" align="left" bgcolor="#FFFFFF" class="size12px"> <input id="txtEntName" name="txtEntName" class="news" onblur="validate(this.value, this.id)" size="38" value="<?php echo $_SESSION['values']['txtEntName'] ?>" /> <span id="divcompanyName"><font color="#624b35">( 请准确填写公司名称。 ) </font></span> <span id="txtEntNameFailed" class="<?php echo $_SESSION['errors']['txtEntName'] ?>">( 公司名称为空或已经被注册)</span> </td> </tr>  <tr> <td width="89" align="left" bgcolor="#ffffff" class="size12px"><font color="#ff6600">*</font><label for="txtContactPerson">联系人：</label> </td> <td align="left" bgcolor="#ffffff" class="size12px"> <input id="txtContactPerson" name="txtContactPerson" class="news" onblur="validate(this.value, this.id)" size="28" value="<?php echo $_SESSION['values']['txtContactPerson'] ?>" /> <span id="divcontactPerson"><font color="#624b35">( 请输入正确联系人，只允许中文，以方便求职者与贵公司联系。例如：王小姐或王学而 ) </font></span> <span id="txtContactPersonFailed" class="<?php echo $_SESSION['errors']['txtContantPerson'] ?>">( 公司联系人不能为空或不是中文)</span> </td> </tr>  <tr> <td width="89" align="left" bgcolor="#FFFFFF" class="size12px"><font color="#ff6600">*</font><label for="txtPhone">联系电话： </label></td> <td align="left" bgcolor="#FFFFFF" class="size12px"> <input id="txtPhone" name="txtPhone" class="news" type="text" onblur="validate(this.value, this.id)" value="<?php echo $_SESSION['values']['txtPhone'] ?>" /> <span id="divcontactTel"><font color="#624b35">( 例如：028-84760000)</font></span> <span id="txtPhoneFailed" class="<?php echo $_SESSION['errors']['txtPhone'] ?>">请输入正确的电话号码格式 (xxx-xxxxxxxx). </span> </td> </tr>  <tr> <td width="89" align="left" valign="bottom" bgcolor="#ffffff" class="size12px"> <font color="#ff6600">*</font><label for="txtVerifyCode">验证码：</label> </td> <td align="left" bgcolor="#ffffff" class="size12px"> <input id="txtVerifyCode" name="txtVerifyCode" class="news" type="text" onblur="validate(this.value, this.id)" value="<?php echo $_SESSION['values']['txtVerifyCode'] ?>" /><img src="../../../../../../include/GetVerifyImg.php" mce_src="include/GetVerifyImg.php" alt="" id="verifyImgCode" style="cursor:pointer" mce_style="cursor:pointer" title="点击更换验证码" onclick="javascript: document.getElementById('verifyImgCode').src='../../../../../../include/GetVerifyImg.php?'+Math.random();"/><a href="javascript: void(0);" mce_href="javascript: void(0);" class="search" style="color: rgb(255, 51, 0); text-decoration: underline;" mce_style="color: #ff3300; text-decoration: underline;" onclick="javascript: document.getElementById('verifyImgCode').src='../../../../../../include/GetVerifyImg.php?'+Math.random();">看不清楚点我</a> <font color="#624b35"> ( 请把左边的文字输入框中 ) </font> <span id="txtVerifyCodeFailed" class="<?php echo $_SESSION['errors']['txtVerifyCode'] ?>">请输入正确验证码</span> </td> </tr> </tbody> </table> <table border="0" cellpadding="0" cellspacing="0" height="24" width="100%"> <tbody>  <tr> <td height="41">　 <a href="#" mce_href="#" target="_blank" class="jrsc">点此阅读服务条款</a> <input type="checkbox" id="chkReadTerms" name="chkReadTerms" class="left" onblur="validate(this.checked, this.id)" <?php if ($_SESSION['values']['chkReadTerms'] == 'on') echo 'checked="checked"' ?> /> <span class="size12px">同意服务条款!</span> <span id="chkReadTermsFailed" class="<?php echo $_SESSION['errors']['chkReadTerms'] ?>">请确认已经阅读服务条款.</span> </td> </tr> <tr> <td height="20"><img src="images/huanxian.jpg" mce_src="images/huanxian.jpg" width="900" height="2" /></td> </tr> </tbody> </table> <table width="100%" height="40" border="0" align="left" cellspacing="0"> <tr> <td width="14%" align="left" valign="middle"><img src="images/zc.gif" mce_src="images/zc.gif" width="95" height="29" style="cursor:pointer" mce_style="cursor:pointer" onclick="javascript:fsubmit(document.frmRegistrerEnterprise);" /></a></td> <td width="81%" align="left" valign="middle"><img src="images/cz.gif" mce_src="images/cz.gif" width="95" height="29" style="cursor:pointer" mce_style="cursor:pointer" onclick="javascript:fsubmit(document.frmRegistrerEnterprise);" /></td> <td width="5%"> </td> </tr> </table> </td> </tr> </tbody> </table> </form>  <mce:script language="javascript"></mce:script> <?php include_once('footer.php'); ?>

regEntAjax.js

// holds an instance of XMLHttpRequest var xmlHttp = createXmlHttpRequestObject(); // holds the remote server address var serverAddress = "../app/validateRegEnt.php"; //var serverAddress = "../app/" + document.getElementById("serverAddress").value; // when set to true, display detailed error messages var showErrors = true; // initialize the validation requests cache var cache = new Array(); // creates an XMLHttpRequest instance function createXmlHttpRequestObject() { // will store the reference to the XMLHttpRequest object var xmlHttp; // this should work for all browsers except IE6 and older try { // try to create XMLHttpRequest object xmlHttp = new XMLHttpRequest(); } catch(e) { // assume IE6 or older var XmlHttpVersions = new Array("MSXML2.XMLHTTP.6.0", "MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP"); // try every id until one works for (var i=0; i<XmlHttpVersions.length && !xmlHttp; i++) { try { // try to create XMLHttpRequest object xmlHttp = new ActiveXObject(XmlHttpVersions[i]); } catch (e) {} // ignore potential error } } // return the created object or display an error message if (!xmlHttp) displayError("Error creating the XMLHttpRequest object."); else return xmlHttp; } // function that displays an error message function displayError($message) { // ignore errors if showErrors is false if (showErrors) { // turn error displaying Off showErrors = false; // display error message alert("Error encountered: /n" + $message); // retry validation after 10 seconds setTimeout("validate();", 10000); } } // the function handles the validation for any form field function validate(inputValue, fieldID) { // only continue if xmlHttp isn't void if (xmlHttp) { // if we received non-null parameters, we add them to cache in the // form of the query string to be sent to the server for validation if (fieldID) { // encode values for safely adding them to an HTTP request query string inputValue = encodeURIComponent(inputValue); fieldID = encodeURIComponent(fieldID); // add the values to the queue cache.push("inputValue=" + inputValue + "&fieldID=" + fieldID); } // try to connect to the server try { // continue only if the XMLHttpRequest object isn't busy // and the cache is not empty if ((xmlHttp.readyState == 4 || xmlHttp.readyState == 0) && cache.length > 0) { // get a new set of parameters from the cache var cacheEntry = cache.shift(); // make a server request to validate the extracted data xmlHttp.open("POST", serverAddress, true); xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xmlHttp.onreadystatechange = handleRequestStateChange; xmlHttp.send(cacheEntry); } } catch (e) { // display an error when failing to connect to the server displayError(e.toString()); } } } // function that handles the HTTP response function handleRequestStateChange() { // when readyState is 4, we read the server response if (xmlHttp.readyState == 4) { // continue only if HTTP status is "OK" if (xmlHttp.status == 200) { try { // read the response from the server readResponse(); } catch(e) { // display error message displayError(e.toString()); } } else { // display error message displayError(xmlHttp.statusText); } } } // read server's response function readResponse() { // retrieve the server's response var response = xmlHttp.responseText; // server error? if (response.indexOf("ERRNO") >= 0 || response.indexOf("error:") >= 0 || response.length == 0) throw(response.length == 0 ? "Server error." : response); // get response in XML format (assume the response is valid XML) responseXml = xmlHttp.responseXML; // get the document element xmlDoc = responseXml.documentElement; result = xmlDoc.getElementsByTagName("result")[0].firstChild.data; fieldID = xmlDoc.getElementsByTagName("fieldid")[0].firstChild.data; // find the HTML element that displays the error message = document.getElementById(fieldID + "Failed"); // show the error or hide the error message.className = (result == "0") ? "error" : "hidden"; // call validate() again, in case there are values left in the cache setTimeout("validate();", 500); } // sets focus on the first field of the form function getFocus() { //document.getElementById("txtUsername").focus(); }

validateRegEnt.php

<?php // start PHP session session_start(); require_once ('config.inc.php'); // load error handling script and validation class require_once ('errorHandlerCtrol.php'); require_once (INCLUDE_PATH. 'db.inc.php'); require_once (CLASS_PATH . 'Enterprise.class.php'); require_once ('ValidateRegEnt.class.php'); // Create new validator object $validateRegEnt = new ValidateRegEnt(); // read validation type (PHP or AJAX?) $validationType = ''; if (isset($_GET['validationType'])) { $validationType = $_GET['validationType']; } // AJAX validation or PHP validation? if ($validationType == 'php') { // PHP validation is performed by the ValidatePHP method, which returns // the page the visitor should be redirected to (which is allok.php if // all the data is valid, or back to index.php if not) header("Location:" . $validateRegEnt->ValidatePHP()); } else { // AJAX validation is performed by the ValidateAJAX method. The results // are used to form an XML document that is sent back to the client $response = '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>' . '<response>' . '<result>' . $validateRegEnt->ValidateAJAX($_POST['inputValue'], $_POST['fieldID']) . '</result>' . '<fieldid>' . $_POST['fieldID'] . '</fieldid>' . '</response>'; // generate the response if(ob_get_length()) ob_clean(); header('Content-Type: text/xml'); echo $response; } ?>

registerEnt.inc.php

<?php // start PHP session session_start(); require_once ('config.inc.php'); require_once (INCLUDE_PATH. 'db.inc.php'); require_once (CLASS_PATH . 'Enterprise.class.php'); $regEnterprise = new Enterprise(); $data = array(); $data['f_ent_email'] = trim($_SESSION['values']['txtEmail']); $data['f_ent_password'] = md5(trim($_SESSION['values']['txtPassword'])); $data['f_ent_name'] = addslashes(trim($_SESSION['values']['txtEntName'])); $data['f_ent_contact'] = trim($_SESSION['values']['txtContactPerson']); $data['f_ent_phone'] = trim($_SESSION['values']['txtPhone']); $data['f_ent_date'] = date("Y-m-d H:i:s", $_SERVER['REQUEST_TIME']); $data['f_ent_status'] = 0; try { $entID = $regEnterprise->insertData("TB_ENTERPRISE_INFO", $data); } catch (Exception $e) { echo "数据插入出错，错误信息为："; echo $e; $regEnterprise->rollback(); } $regEnterprise->commit(); if($entID) { header("Location: ../html/entInfo.php?id={$entID}"); } else { echo "<center>"; echo "插入数据出错...请返回重新操作"; echo "<a href="../html/registerEnt.php" mce_href="html/registerEnt.php"></a>"; echo "</center>"; } ?>

ValidateRegEnt.class.php

<?php /** * Description: validate the enterprise registering * */ class ValidateRegEnt extends Enterprise { /** * Description: __construct() connect to the database * */ function __construct() { parent::__construct(); } // supports AJAX validation, verifies a single value public function ValidateAJAX($inputValue, $fieldID) { // check which field is being validated and perform validation switch($fieldID) { // Check if email is valid case 'txtEmail': return $this->validateEmail($inputValue); break; // Check if the password is valid case 'txtPassword': return $this->validatePassword($inputValue); break; // Check if the confirm password is valid case 'txtConfirmPassword': return $this->validateConfirmPassword($inputValue); break; // Check if a enterprise name was selected case 'txtEntName': return $this->validateEntName($inputValue); break; // Check if contact person is valid case 'txtContactPerson': return $this->validateContactPerson($inputValue); break; // Check if phone is valid case 'txtPhone': return $this->validatePhone($inputValue); break; // Check if verify code is valid case 'txtVerifyCode': return $this->validateVerifyCode($inputValue); break; // Check if "I have read the terms" checkbox has been checked case 'chkReadTerms': return $this->validateReadTerms($inputValue); break; } } // validates all form fields on form submit public function ValidatePHP() { // error flag, becomes 1 when errors are found. $errorsExist = 0; // clears the errors session flag if (isset($_SESSION['errors'])) unset($_SESSION['errors']); // By default all fields are considered valid $_SESSION['errors']['txtEmail'] = 'hidden'; $_SESSION['errors']['txtPassword'] = 'hidden'; $_SESSION['errors']['txtConfirmPassword'] = 'hidden'; $_SESSION['errors']['txtEntName'] = 'hidden'; $_SESSION['errors']['txtContactPerson'] = 'hidden'; $_SESSION['errors']['txtPhone'] = 'hidden'; $_SESSION['errors']['txtVerifyCode'] = 'hidden'; $_SESSION['errors']['chkReadTerms'] = 'hidden'; // Validate email if (!$this->validateEmail($_POST['txtEmail'])) { $_SESSION['errors']['txtEmail'] = 'error'; $errorsExist = 1; } // Validate password if (!$this->validatePassword($_POST['txtPassword'])) { $_SESSION['errors']['txtPassword'] = 'error'; $errorsExist = 1; } // Validate confirm password if (!$this->validateConfirmPassword($_POST['txtConfirmPassword']) || $_POST['txtPassword'] != $_POST['txtConfirmPassword']) { $_SESSION['errors']['txtConfirmPassword'] = 'error'; $errorsExist = 1; } // Validate enterprise name if (!$this->validateEntName($_POST['txtEntName'])) { $_SESSION['errors']['txtEntName'] = 'error'; $errorsExist = 1; } // Validate contact person if (!$this->validateContactPerson($_POST['txtContactPerson'])) { $_SESSION['errors']['txtContactPerson'] = 'error'; $errorsExist = 1; } // Validate phone if (!$this->validatePhone($_POST['txtPhone'])) { $_SESSION['errors']['txtPhone'] = 'error'; $errorsExist = 1; } // Validate verify code if (!$this->validateVerifyCode($_POST['txtVerifyCode'])) { $_SESSION['errors']['txtVerifyCode'] = 'error'; $errorsExist = 1; } // Validate read terms if (!isset($_POST['chkReadTerms']) || !$this->validateReadTerms($_POST['chkReadTerms'])) { $_SESSION['errors']['chkReadTerms'] = 'error'; $_SESSION['values']['chkReadTerms'] = ''; $errorsExist = 1; } // If no errors are found, point to a successful validation page if ($errorsExist == 0) { foreach ($_POST as $key => $value) { $_SESSION['values'][$key] = $_POST[$key]; print_r($_SESSION['values']); } return 'regEntCtrol.php'; } else { // If errors are found, save current user input foreach ($_POST as $key => $value) { $_SESSION['values'][$key] = $_POST[$key]; } return '../html/registerEnt.php'; } } // validate email private function validateEmail($value) { if (trim($value) == null) { // if email is null return 0; // not valid } // '/([a-z0-9]*[-_/.]?[a-z0-9]+)*@([a-z0-9]*[-_]?[a-z0-9]+)+[/.][a-z]{2,3}([/.][a-z]{2})?/i' // '^[a-z]([a-z0-9]*[-_]?[a-z0-9]+)*@([a-z0-9]*[-_]?[a-z0-9]+)+[/.][a-z]{2,3}([/.][a-z]{2})?$/i' //if(!eregi('/^[_a-z0-9-]+(/.[_a-z0-9-]+)*@[a-z0-9-]+(/.[a-z0-9-]+)*(/.[a-z]{2,3})$/i', $value)) { if(!eregi('^[_.0-9a-z-]+@([0-9a-z][0-9a-z-]+.)+[a-z]{2,3}<br></span>errorHandler.php<br></p> <p><textarea cols="50" rows="15" name="code" class="php"><?php // set the user error handler method to be error_handler set_error_handler('error_handler', E_ALL); // error handler function function error_handler($errNo, $errStr, $errFile, $errLine) { // clear any output that has already been generated if(ob_get_length()) ob_clean(); // output the error message $error_message = 'ERRNO: ' . $errNo . chr(10) . 'TEXT: ' . $errStr . chr(10) . 'LOCATION: ' . $errFile . ', line ' . $errLine; echo $error_message; // prevent processing any more PHP scripts exit; } ?>

errorHandler.php

<?php // set the user error handler method to be error_handler set_error_handler('error_handler', E_ALL); // error handler function function error_handler($errNo, $errStr, $errFile, $errLine) { // clear any output that has already been generated if(ob_get_length()) ob_clean(); // output the error message $error_message = 'ERRNO: ' . $errNo . chr(10) . 'TEXT: ' . $errStr . chr(10) . 'LOCATION: ' . $errFile . ', line ' . $errLine; echo $error_message; // prevent processing any more PHP scripts exit; } ?>