validateform.html:
JavaScript代码
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <script type="text/javascript" src="../../../js/zxml.src.js"></script>
- <script type="text/javascript">
- var oXmlHttp;
- function createXMLHttpRequest() {
- if(window.ActiveXObject) {
- oXmlHttp = new ActiveXObject("Microsoft.XMLHttp");
- }
- else if(window.XMLHttpRequest) {
- oXmlHttp = new XMLHttpRequest();
- }
- }
- function isFormValid () {
- var frmMain = document.forms[0];
- var blnValid = true;
- for(var i=0;i < frmMain.elements.length;i++) {
- if(typeof frmMain.elements[i].valid == "boolean") {
- blnValid = blnValid && frmMain.elements[i].valid;
- }
- }
- return blnValid;
- }
- function validateField(oEvent) {
- oEvent = oEvent || window.event;
- var txtField = oEvent.target || oEvent.srcElement;
- createXMLHttpRequest();//zXmlHttp.createRequest();
- oXmlHttp.open("get","validateform.php?" + txtField.name + "=" + encodeURIComponent(txtField.value),true);
- oXmlHttp.onreadystatechange = function () {
- if (oXmlHttp.readyState == 4) {
- if (oXmlHttp.status == 200) {
- var arrInfo = oXmlHttp.responseText.split("||");
- var imgError = document.getElementById("img"+txtField.id.substring(3)+"Error");
- var txtError = document.getElementById("txt"+txtField.id.substring(3)+"Error");
- var btnSignUp = document.getElementById("btnSignUp");
- if (!eval(arrInfo[0])) {
- imgError.title = arrInfo[1];
- imgError.style.display = "";
- txtError.style.display = "";
- txtError.innerHTML = arrInfo[1];
- txtField.valid = false;
- } else {
- imgError.style.display = "none";
- txtField.valid = true;
- txtError.style.display = "none";
- }
- if (isFormValid()) {btnSignUp.disabled = false;btnSignUp.value = "可以注册了";}
- //else {btnSignUp.disabled = true;btnSignUp.value = "还不能注册,请按格式规范填写各项信息";}
- } else {
- alert("An error occured while trying to contact the server");
- }
- }
- };
- oXmlHttp.send(null);
- }
- window.onload = function () {
- if (1) {
- var btnSignUp = document.getElementById("btnSignUp");
- var txtUsername = document.getElementById("txtUsername");
- var txtPassword = document.getElementById("txtPassword");
- var txtEmail = document.getElementById("txtEmail");
- btnSignUp.disabled = true;
- txtUsername.onchange = validateField;
- txtPassword.onchange = validateField;
- txtEmail.onchange = validateField;
- txtUsername.valid = false;
- txtPassword.valid = false;
- txtEmail.valid = false;
- }
- };
- </script>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>AJAX表单验证</title>
- </head>
- <body>
- <form id="form1" name="form1" method="post" action="">
- <table width="600" border="0" align="center" cellpadding="0" cellspacing="0">
- <tr>
- <td width="300">用户名(长度大于8,"susansays"已存在):</td>
- <td width="295">
- <input name="txtUsername" type="text" id="txtUsername" size="40" /><div id="txtUsernameError"></div></td>
- <td width="16"><img src="no.gif" width="16" height="16" style="display:none" id="imgUsernameError"/></td>
- </tr>
- <tr>
- <td width="300">密码(长度大于8):</td>
- <td><input name="txtPassword" type="password" id="txtPassword" size="40" />
- <div id="txtPasswordError"></div></td>
- <td width="16"><img src="no.gif" width="16" height="16" style="display:none" id="imgPasswordError" /></td>
- </tr>
- <tr>
- <td width="300">电子邮件:</td>
- <td><input name="txtEmail" type="text" id="txtEmail" size="40" /><div id="txtEmailError"></div></td>
- <td width="16"><img src="no.gif" width="16" height="16" style="display:none" id="imgEmailError" /></td>
- </tr>
- <!--<tr>
- <td>生日:</td>
- <td><input name="txtBirthday" type="text" id="txtBirthday" size="40" /><div id="txtBirthdayError"></div></td>
- <td width="16"><img src="no.gif" width="16" height="16" style="display:none" id="imgBirthdayError" /></td>
- </tr>-->
- <tr>
- <td width="300"> </td>
- <td><input type="button" οnclick="javascript:confirm('感谢你参与测试!!!');" name="btnSignUp" id="btnSignUp" value="还不能注册,请按格式规范填写各项信息" /></td>
- <td width="16"> </td>
- </tr>
- </table>
- </form>
- <script language="javascript" src="http://count43.51yes.com/click.aspx?id=430013154&logo=1"></script>
- </body>
- </html>
validateform.php:
PHP代码
- <?php
- $valid = "false";
- $message = "an unknown error occurred.";
- if (isset($_GET['txtPassword'])) {
- if (strlen($_GET['txtPassword']) < 8 && $_GET['txtPassword'] != "") {
- $message = "密码要大于8个字符";
- } else if ($_GET['txtPassword'] == "") {
- $message = "密码不能为空";
- } else {
- $valid = "true";
- $message = "";
- }
- } else if (isset($_GET['txtUsername'])) {
- if ($_GET['txtUsername'] == "susansays") {
- $message = "该用户名已被注册!请换一个用户名!";
- } else if (strlen($_GET['txtUsername']) < 8 && $_GET['txtUsername'] != "") {
- $message = "用户名要大于8个字符";
- } else if ($_GET['txtUsername'] == "") {
- $message = "用户名不能为空";
- } else {
- $valid = "true";
- $message = "";
- }
- } /*else if (isset($_GET['txtBirthday'])) {
- $date = strtotime($_GET['txtBirthday']);
- if ($date < 0) {
- $message = "这不是一个合法的日期";
- } else {
- $valid = "true";
- $message = "";
- }
- }*/ else if (isset($_GET['txtEmail'])) {
- if( !eregi("^[_/.0-9a-z-]+@([0-9a-z][0-9a-z-]+/.)+[a-z]{2,3}$",$_GET['txtEmail']) ) {
- $message = "请您填写正确的email地址!";
- } else {
- $valid = "true";
- $message = "";
- }
- }
- echo "$valid||$message";
- ?>