使用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.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%>
分享到：
相关推荐
Ajax表单验证插件是一种在前端进行用户输入验证的技术，它结合了Ajax（异步JavaScript和XML）与JavaScript库，通常用于提升用户体验，避免传统表单提交时页面刷新的不便。这种插件允许数据在后台实时验证，同时保持...
带数据库连接的AJAX表单验证实例PHP版 一个带数据库连接的AJAX表单验证实例，运行于PHP环境，免费开源的程序，这意味着您可以在不用于商业目的的情况下对程序代码进行修改、使用和再发布。本例包括一个自定义的Ajax...
在本项目中，我们关注的是“Ajax表单验证”，这是一个利用Ajax技术实现在用户填写表单时实时验证数据的有效性，而无需整个页面进行刷新的过程。通过这种方式，我们可以减少用户等待时间，提供更流畅的界面操作。 ...
总的来说，`formValidator3.3`通过其强大的功能和易用性，成为了开发高效、用户友好的Web表单验证的理想选择。无论你是哪种编程语言的开发者，都能借助这个工具轻松实现Ajax用户验证，提升应用的用户体验。
"validate 通用Ajax无刷新表单验证类"就是针对这一需求设计的，旨在提供一个高效、便捷的解决方案，使得在用户填写表单时能够实时进行数据验证，无需等待页面刷新，极大地提高了用户体验。 Ajax（Asynchronous ...
Ajax表单验证框架是现代Web应用不可或缺的一部分，它结合了Ajax的异步特性和表单验证的必要性，使得用户在提交表单时能获得即时的反馈。合理选择和使用这些框架，可以提升网站的质量和用户体验。在实际开发中，我们...
从给定的文件信息来看，该文章主要介绍了一款基于JavaScript的表单验证插件，其功能强大且设计美观，能够实现Ajax异步验证。该插件覆盖了多种常见的数据验证需求，如Email验证、日期验证、字符长度验证以及通用的...
### 基于ASP.NET Ajax框架实现表单验证编程原理详解 #### 一、引言 随着Web应用程序的复杂度不断提高，确保用户数据的安全性和准确性变得尤为重要。ASP.NET Ajax框架提供了一种强大的方式来增强用户体验，并同时...
在这个"html5 Ajax表单验证实例"中，我们将会探讨如何利用HTML5的新特性与Ajax技术结合，来创建一个既高效又能提供实时反馈的表单验证系统。 首先，HTML5引入了许多新的表单元素和属性，使得表单验证变得更加简单且...
在网页开发中，表单验证是必不可少的一环，它确保用户输入的数据符合预期，从而减少服务器端的压力并提升用户体验。本篇文章"表单验证- jQuery+Validation"将深入探讨如何利用jQuery库及其验证插件Validation进行...
本主题将深入探讨“表单验证自定义验证规则和错误信息”，帮助开发者构建更加灵活、用户体验良好的表单验证机制。 表单验证的基本流程通常包括以下步骤： 1. **前端验证**：在用户提交表单前，通过JavaScript或...
本文将详细探讨如何利用jQuery实现表单验证，特别是`equalTo`方法的使用，这是一个非常实用的功能，用于确保用户输入的两个字段值相等，如常见于确认密码或验证码场景。 首先，理解`equalTo`方法的基本概念。`equal...
"Validation Ajax表单验证类"是这样一个工具，它通过异步方式在客户端进行表单验证，无需刷新页面即可提供即时反馈。 Ajax允许前端与后端服务器进行通信，通过JavaScript发送XMLHttpRequest对象，实现在后台处理...
5. **高度可定制**：允许开发者自定义验证规则、消息提示等。 6. **免费开源**：遵循MIT许可协议，可以自由使用和分发。 #### 内置验证规则 Parsley.js提供了丰富的内置验证规则，包括但不限于： - `required`：...
2、插件支持自定义验证提醒方式，可根据自己项目需求扩展 验证错误提示、验证过程提示、验证成功提示。 3、插件支持自定义表单提交验证方式，并支持使用Asp.Net 中服务器端Button进行验证。（注：使用服务器端Button...
`懒人图库.txt`：这可能是一个文本文件，包含了一些图片资源的链接或者描述，用于辅助构建表单验证示例时的界面展示，例如错误提示图标或者成功状态的反馈图像。 `readme.htm`：这是一个HTML文件，通常用来提供关于...
这通常涉及到前端表单验证和后端服务器验证的结合，确保用户输入的数据既符合预期格式，又满足业务逻辑。 **一、AJAX基础知识** AJAX的核心是XMLHttpRequest对象，它提供了与服务器异步通信的能力。通过创建...
2. **自定义验证**："笨阿猪高级表单验证"可能允许开发者编写自己的JavaScript函数来执行特定的验证逻辑，以满足特殊需求。 3. **正则表达式验证**：使用正则表达式可以实现复杂的模式匹配，用于验证各种复杂格式的...
6. **表单验证**：layui提供了表单验证功能，可以方便地对用户输入进行校验，保证数据的正确性。 7. **自定义组件**：layui允许开发者根据需求自定义组件，扩展其功能，例如创建复杂表单控件或交互效果。 8. **...
【FormValid 0.5版本】是一个JavaScript表单验证库，其主要功能在于提供高效且灵活的表单验证机制，尤其在新发布的0.5版本中引入了Ajax自定义验证功能。这个版本针对之前存在的问题进行了修复，并且增加了新的验证...