现在的位置: 首页 > 综合 > 正文

表单ajax验证

2018年05月15日 ⁄ 综合 ⁄ 共 6020字 ⁄ 字号 小 中 大 ⁄ 评论关闭

validateform.html:

JavaScript代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
  2. <html xmlns="http://www.w3.org/1999/xhtml">   
  3. <head>   
  4. <script type="text/javascript" src="../../../js/zxml.src.js"></script>   
  5. <script type="text/javascript">   
  6. var oXmlHttp;   
  7.   
  8. function createXMLHttpRequest() {   
  9.   if(window.ActiveXObject) {   
  10.      oXmlHttp = new ActiveXObject("Microsoft.XMLHttp");   
  11.   }   
  12.   else if(window.XMLHttpRequest) {   
  13.      oXmlHttp = new XMLHttpRequest();   
  14.   }   
  15. }   
  16.   
  17. function isFormValid () {   
  18.   var frmMain = document.forms[0];   
  19.   var blnValid = true;   
  20.   for(var i=0;i < frmMain.elements.length;i++) {   
  21.      if(typeof frmMain.elements[i].valid == "boolean") {   
  22.         blnValid = blnValid && frmMain.elements[i].valid;   
  23.      }   
  24.   }   
  25.   return blnValid;   
  26. }   
  27.   
  28. function validateField(oEvent) {   
  29.   oEvent = oEvent || window.event;   
  30.   var txtField = oEvent.target || oEvent.srcElement;   
  31.   createXMLHttpRequest();//zXmlHttp.createRequest();   
  32.   oXmlHttp.open("get","validateform.php?" + txtField.name + "=" + encodeURIComponent(txtField.value),true);   
  33.   oXmlHttp.onreadystatechange = function () {   
  34.      if (oXmlHttp.readyState == 4) {   
  35.         if (oXmlHttp.status == 200) {   
  36.             var arrInfo = oXmlHttp.responseText.split("||");   
  37.             var imgError = document.getElementById("img"+txtField.id.substring(3)+"Error");   
  38.             var txtError = document.getElementById("txt"+txtField.id.substring(3)+"Error");   
  39.             var btnSignUp = document.getElementById("btnSignUp");   
  40.             if (!eval(arrInfo[0])) {   
  41.                imgError.title = arrInfo[1];   
  42.                imgError.style.display = "";   
  43.                txtError.style.display = "";   
  44.                txtError.innerHTML = arrInfo[1];   
  45.                txtField.valid = false;   
  46.             } else {   
  47.                imgError.style.display = "none";   
  48.                txtField.valid = true;   
  49.                txtError.style.display = "none";   
  50.             }   
  51.             if (isFormValid()) {btnSignUp.disabled = false;btnSignUp.value = "可以注册了";}   
  52.             //else {btnSignUp.disabled = true;btnSignUp.value = "还不能注册,请按格式规范填写各项信息";}   
  53.         } else {   
  54.             alert("An error occured while trying to contact the server");   
  55.         }   
  56.     }   
  57.   };   
  58.   oXmlHttp.send(null);   
  59. }   
  60.   
  61. window.onload = function () {   
  62.   if (1) {   
  63.      var btnSignUp = document.getElementById("btnSignUp");   
  64.      var txtUsername = document.getElementById("txtUsername");   
  65.      var txtPassword = document.getElementById("txtPassword");   
  66.      var txtEmail = document.getElementById("txtEmail");   
  67.         
  68.      btnSignUp.disabled = true;   
  69.      txtUsername.onchange = validateField;   
  70.      txtPassword.onchange = validateField;   
  71.      txtEmail.onchange = validateField;   
  72.      txtUsername.valid = false;   
  73.      txtPassword.valid = false;   
  74.      txtEmail.valid = false;   
  75.   }   
  76. };   
  77. </script>   
  78.   
  79. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
  80. <title>AJAX表单验证</title>   
  81. </head>   
  82.   
  83. <body>   
  84. <form id="form1" name="form1" method="post" action="">   
  85. <table width="600" border="0" align="center" cellpadding="0" cellspacing="0">   
  86.   <tr>   
  87.     <td width="300">用户名(长度大于8,"susansays"已存在):</td>   
  88.     <td width="295">   
  89.       <input name="txtUsername" type="text" id="txtUsername" size="40" /><div id="txtUsernameError"></div></td>   
  90.     <td width="16"><img src="no.gif" width="16" height="16" style="display:none" id="imgUsernameError"/></td>   
  91.   </tr>   
  92.   <tr>   
  93.     <td width="300">密码(长度大于8):</td>   
  94.     <td><input name="txtPassword" type="password" id="txtPassword" size="40" />   
  95.     <div id="txtPasswordError"></div></td>   
  96.     <td width="16"><img src="no.gif" width="16" height="16" style="display:none" id="imgPasswordError" /></td>   
  97.   </tr>   
  98.   <tr>   
  99.     <td width="300">电子邮件:</td>   
  100.     <td><input name="txtEmail" type="text" id="txtEmail" size="40" /><div id="txtEmailError"></div></td>   
  101.     <td width="16"><img src="no.gif" width="16" height="16" style="display:none" id="imgEmailError" /></td>   
  102.   </tr>   
  103.   <!--<tr>   
  104.     <td>生日:</td>   
  105.     <td><input name="txtBirthday" type="text" id="txtBirthday" size="40" /><div id="txtBirthdayError"></div></td>   
  106.     <td width="16"><img src="no.gif" width="16" height="16" style="display:none" id="imgBirthdayError" /></td>   
  107.   </tr>-->   
  108.   <tr>   
  109.     <td width="300"> </td>   
  110.     <td><input type="button" onclick="javascript:confirm('感谢你参与测试!!!');" name="btnSignUp" id="btnSignUp" value="还不能注册,请按格式规范填写各项信息" /></td>   
  111.     <td width="16"> </td>   
  112.   </tr>   
  113. </table>   
  114. </form>   
  115. <script language="javascript" src="http://count43.51yes.com/click.aspx?id=430013154&logo=1"></script>   
  116. </body>   
  117. </html>  

validateform.php:

PHP代码
  1. <?php   
  2.    $valid = "false";   
  3.    $message = "an unknown error occurred.";   
  4.       
  5.    if (isset($_GET['txtPassword'])) {   
  6.        if (strlen($_GET['txtPassword']) < 8 && $_GET['txtPassword'] != "") {   
  7.            $message = "密码要大于8个字符";   
  8.        } else if ($_GET['txtPassword'] == "") {   
  9.            $message = "密码不能为空";   
  10.        } else {   
  11.            $valid = "true";   
  12.            $message = "";   
  13.        }   
  14.    } else if (isset($_GET['txtUsername'])) {   
  15.        if ($_GET['txtUsername'] == "susansays") {   
  16.            $message = "该用户名已被注册!请换一个用户名!";   
  17.        } else if (strlen($_GET['txtUsername']) < 8 && $_GET['txtUsername'] != "") {   
  18.            $message = "用户名要大于8个字符";   
  19.        } else if ($_GET['txtUsername'] == "") {   
  20.            $message = "用户名不能为空";   
  21.        } else {   
  22.            $valid = "true";   
  23.            $message = "";   
  24.        }   
  25.    } /*else if (isset($_GET['txtBirthday'])) {  
  26.        $date = strtotime($_GET['txtBirthday']);  
  27.        if ($date < 0) {  
  28.            $message = "这不是一个合法的日期";  
  29.        } else {  
  30.            $valid = "true";  
  31.            $message = "";  
  32.        }  
  33.    }*/ else if (isset($_GET['txtEmail'])) {   
  34.        if( !eregi("^[_/.0-9a-z-]+@([0-9a-z][0-9a-z-]+/.)+[a-z]{2,3}$",$_GET['txtEmail']) ) {   
  35.          $message = "请您填写正确的email地址!";   
  36.        } else {   
  37.          $valid = "true";   
  38.          $message = "";   
  39.        }   
  40.    }    
  41.       
  42.    echo "$valid||$message";   
  43. ?>  
返回
【上篇】
【下篇】

作者:

抱歉!评论已关闭.

返回首页

Copyright © 2013-2018 学步园  保留所有权利.
软文销售 QQ客服：2265327166 点击这里给我发消息（其他合作也可洽谈）
必威体育
必威电竞