ajax表单证验-可自定义填写则验证
日期：2014-05-16 浏览次数：20693 次
ajax表单验证-可自定义填写则验证
使用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" onclick="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.styl
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
