使用ajax进行表单验证,不是什么新鲜事了,如何控制自如呢?假如你有以下需求
1,验证不通过不显示提交按钮
2,表单中有若干项,不是必须填写的,若填写,则进行验证
3,表单中若干项,必须填写必须验证
你不妨参考以下例子,本示例ajax处理采用asp,当然你可以改写成其他语言
index.html页面代码如下
<!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 src="ajax.js" language="javascript" type="application/javascript" ></script>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>AJAX表单验证</title>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table width="744" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="230">用户名(长度大于8,qwer已存在):</td>
<td width="293">
<input name="txtUsername" type="text" id="txtUsername" size="40" /></td>
<td height="20" ><img src="yes.gif" width="16" height="16" style="display:none" id="imgUsernameCorrect"/><img src="no.gif" width="16" height="16" style="display:none" id="imgUsernameError"/><div id="txtUsernameError" style="float:right;" ></div></td>
</tr>
<tr>
<td width="230">密码(长度大于8):</td>
<td><input name="txtPassword" type="password" id="txtPassword" size="40" />
</td>
<td ><img src="yes.gif" width="16" height="16" style="display:none" id="imgPasswordCorrect" /><img src="no.gif" width="16" height="16" style="display:none" id="imgPasswordError" /><div id="txtPasswordError"></div></td>
</tr>
<tr>
<td width="230">电子邮件:</td>
<td><input name="txtEmail" type="text" id="txtEmail" size="40" /></td>
<td><img src="Yes.gif" width="16" height="16" style="display:none" id="imgEmailCorrect" /><img src="no.gif" width="16" height="16" style="display:none" id="imgEmailError" /><div id="txtEmailError"></div></td>
</tr>
<tr>
<td width="230"> </td>
<td><input type="submit" οnclick="javascript:confirm('感谢你参与测试!!!');" name="submit" id="btnSubmit" value="还不能注册,请按格式规范填写各项信息" /></td>
<td width="221"> </td>
</tr>
</table>
</form>
</body>
</html>
ajax.js文件如下
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","validate.asp?" + 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 imgCorrect =document.getElementById("img"+txtField.id.substring(3)+"Correct"); var txtError = document.getElementById("txt"+txtField.id.substring(3)+"Error"); var btnSubmit = document.getElementById("btnSubmit"); if (!eval(arrInfo[0])) { imgError.title = arrInfo[1]; imgError.style.display = ""; imgCorrect.style.display="none"; txtError.style.display = ""; txtError.innerHTML = arrInfo[1]; txtField.valid = false; } else { imgError.style.display = "none"; imgCorrect.style.display=""; txtField.valid = true; txtError.style.display = "none"; } if (isFormValid()) {btnSubmit.disabled = false;btnSubmit.value = "注册";} else { btnSubmit.disabled = true;} } else { alert("An error occured while trying to contact the server"); } } }; oXmlHttp.send(null); } window.onload = function () { if (1) { var btnSubmit = document.getElementById("btnSubmit"); var txtUsername = document.getElementById("txtUsername"); var txtPassword = document.getElementById("txtPassword"); var txtEmail = document.getElementById("txtEmail"); btnSubmit.disabled = true; txtUsername.onchange = validateField; txtPassword.onchange = validateField; txtEmail.onchange = validateField; txtUsername.valid = false; txtPassword.valid = false;//设为FALSE,必须从填写,进行验证 txtEmail.valid=true;//设为true,则可以为空,如果填写,则进行验证 } };
validate.asp 页面代码如下
<%response.Charset="gb2312" valid = "false" message = "an unknown error occurred" ' txtPassword=request.QueryString("txtPassword") ' txtUsername=request.QueryString("txtUserName") ' txtEmail=request.QueryString("txtEmail") 'if request.QueryString<>"" then if(not isEmpty(request.QueryString("txtPassword") )) then if (len(request.QueryString("txtPassword"))<8) then message = "密码要大于8个字符!" elseif (request.QueryString("txtPassword")="") then message = "密码不能为空!" else valid = "true" message = "1" end if elseif(not isEmpty(request.QueryString("txtUsername"))) then if (request.QueryString("txtUsername") = "qwer") then message = " 该用户名已被注册!请换一个用户名! " elseif (len(request.QueryString("txtUsername")) < 8 and request.QueryString("txtUsername") <> "") then message = "用户名要大于8个字符!" elseif (request.QueryString("txtUsername")= "")then message = "用户名不能为空 !" else valid = "true" message = "" end if elseif(not isEmpty(request.QueryString("txtEmail"))) then if(not IsValidEmail(request.QueryString("txtEmail")) ) then message = "请您填写正确的email地址!" else valid = "true" message = "" end if end if response.Write valid&"||"&message %>
<%function IsValidEmail(email) dim names, name, i, c IsValidEmail = true names = Split(email, "@") if UBound(names) <> 1 then IsValidEmail = false exit function end if for each name in names if Len(name) <= 0 then IsValidEmail = false exit function end if for i = 1 to Len(name) c = Lcase(Mid(name, i, 1)) if InStr("abcdefghijklmnopqrstuvwxyz_-.", c) <= 0 and not IsNumeric(c) then IsValidEmail = false exit function end if next if Left(name, 1) = "." or Right(name, 1) = "." then IsValidEmail = false exit function end if next if InStr(names(1), ".") <= 0 then IsValidEmail = false exit function end if i = Len(names(1)) - InStrRev(names(1), ".") if i <> 2 and i <> 3 then IsValidEmail = false exit function end if if InStr(email, "..") > 0 then IsValidEmail = false end if end function%>