您的位置：首页 > 编程语言 > ASP

ASP+ajax完美实现用户表单检测和注册

2008-01-18 14:31 399 查看
之前我在自己网上(http://www.duku123.com)上发布过一篇这样的贴子，后来有朋友找我，说我的那篇文章里的效果比较简单而且需要的字段太少，不知道单选及cookies该如何弄，这里我重新发一篇最近新做的代码．带详细讲解，希望对各位朋友有帮助

程序运行截图





先说ＪＳ代码

<script language="javascript" type="text/javascript">
<!--
var msg ;
var li_ok='images/li_ok.gif'; //用于显示正确的图标
var li_err='images/li_err.gif' //用于显示错误时的图标
var bname_m=false;
msg=new Array(
"请输入4-20位字符，英文、数字的组合。",
"请输入6位以上字符，不允许空格。",
"请重复输入上面的密码。",
"请输入您的真实姓名",
"请输入电话号码",
"请输入电子邮箱",
"请输入左边的验证码",
"您必须同意注册条款"
)
//定义一个消息数组，用于显示提示信息
var xmlHttp = false;
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
xmlHttp = false;
}
}
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
xmlHttp = new XMLHttpRequest();
}
//建立xmlhttp实现浏览器的兼容
function show(){
if (document.getElementById("country").value=="China"){
document.getElementById("probince").style.display=""
}else
{
document.getElementById("probince").style.display="none"
}
}
//显示隐藏的国家信息对应的地区信息
function GetCookie(sName)
{
// cookies are separated by semicolons
var aCookie = document.cookie.split("; ");
for (var i=0; i < aCookie.length; i++)
{
// a name/value pair (a crumb) is separated by an equal sign
var aCrumb = aCookie[i].split("=");
if (sName == aCrumb[0])
return unescape(aCrumb[1]);
}
// a cookie with the requested name does not exist
return null;
}
//用ＪＳ读取cookies
function on_input(objname){
var strtxt;
var obj=document.getElementById(objname);
//obj.className="d_on";
//alert(objname);
switch (objname){
case "d_username":
strtxt=msg[0];
break;
case "d_pass":
strtxt=msg[1];
break;
case "d_pass2":
strtxt=msg[2];
break;
case "d_truename":
strtxt=msg[3];
break;
case "d_phone":
strtxt=msg[4];
break;
case "d_email":
strtxt=msg[5];
break;
case "d_code":
strtxt=msg[6];
break;
}
obj.innerHTML=strtxt;
}
//做鼠标放文框时的提示信息
function callServer() {
var u_name = document.getElementById("user_name").value;
if ((u_name == null) || (u_name == "")||(u_name.length<4)||(u_name.length>20)) {
d_username.className="d_err";
d_username.innerHTML=msg[0];
chk=false
return chk;};
xmlHttp.open("POST", "user/checkuser.asp", true);
xmlHttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xmlHttp.onreadystatechange = updatePage;
xmlHttp.send("username="+escape(u_name));
}

function updatePage() {
if (xmlHttp.readyState < 4) {
d_username.innerHTML="loading...";
}
if (xmlHttp.readyState == 4 && 200==xmlHttp.status) {
var response = xmlHttp.responseText;
if (response==1)
{
d_username.className="d_ok";
d_username.innerHTML='恭喜用户名可以使用。';
}
else{
d_username.className="d_err";
d_username.innerHTML="用户名已占用，请重新注册";
}
}
}
//检测用户名是否可用
function out_pass(){
var obj=document.getElementById("d_pass");
var str=document.getElementById("password").value;
var chk=true;
if (str=='' || str.length<6 || str.length>18){chk=false;}
if (chk){
obj.className="d_ok";
obj.innerHTML='密码已经输入。';
}else{
obj.className="d_err";
obj.innerHTML=msg[1];
}
return chk;
}
//检查密码是否输入
function out_pass2(){
var obj=document.getElementById("d_pass2");
var str=document.getElementById("password2").value;
var chk=true;
if (str=='' || str!=document.getElementById("password").value){chk=false;}
if (chk){
obj.className="d_ok";
obj.innerHTML='重复密码输入正确。';
}else{
obj.className="d_err";
obj.innerHTML=msg[2];
}
return chk;
}
//检查密码确认
function out_truename(){
var obj=document.getElementById("d_truename");
var str=document.getElementById("truename").value;
var chk=true;
if (str=='' || str.length<4){chk=false;}
if (chk){
obj.className="d_ok";
obj.innerHTML="姓名已输入";
}else{
obj.className="d_err";
obj.innerHTML=msg[3];
}
return chk;
}
//检查真实姓名
function out_phone(){
var obj=document.getElementById("d_phone");
var str=document.getElementById("phone3").value;
var chk=true;
if (str=='' || !str.match(/^/d{7,8}$/ig)){chk=false;}
if (chk){
document.getElementById("tr_phone").style.disply="";
obj.className="d_ok";
obj.innerHTML="电话号码已输入";
}else{
document.getElementById("tr_phone").style.disply="";
obj.className="d_err";
obj.innerHTML=msg[4];
}
return chk;
}
//检查真实姓名
function out_email(){
var obj=document.getElementById("d_email");
var str=document.getElementById("email").value;
var chk=true;
if (str==''|| !str.match(/^[/w/./-]+@([/w/-]+/.)+[a-z]{2,4}$/ig)){chk=false}
if (chk){
obj.className="d_ok";
obj.innerHTML='电子邮箱地址已经输入。';
}else{
obj.className="d_err";
obj.innerHTML=msg[5];
}
return chk;
}
//检查email
function out_code(){
var obj=document.getElementById("d_code");
var str=document.getElementById("code").value;
var chk=true;
if (str==''|| str!=GetCookie("verifycode")){chk=false}
if (chk){
obj.className="d_ok";
obj.innerHTML='验证码已输入';
}else{
obj.className="d_err";
obj.innerHTML=msg[6];
}
return chk;
}
//检查验证码
function out_reg(){
var obj=document.getElementById("d_regtxt");
var chk=true;
if (!document.getElementById("regtxt").checked){chk=false}
if (chk){
obj.className="d_ok";
obj.innerHTML="您已同意注册条款";
}else{
obj.className="d_err";
obj.innerHTML=msg[7];
}
return chk;
}
//检查是否同意了注册条款

function chk_reg(){
var chk=true
if (document.getElementById("user_name").value==''){
chk=false;
d_username.className="d_err";
d_username.innerHTML=msg[0];
}
if (!out_reg()){chk=false}
if (!out_pass()){chk=false}
if (!out_pass2()){chk=false}
if (!out_truename()){chk=false}
if (!out_phone()){chk=false}
if (!out_email()){chk=false}
if(!out_code()){chk=false}
if(chk){
document.getElementById('save_stat').innerHTML='<img src="images/loading.gif" align="absmiddle" />数据提交中……请稍候……'
document.getElementById('regbutton').disabled='disabled';
var username=document.getElementById("user_name").value;
var password=document.getElementById("password").value;
var truename=document.getElementById("truename").value;
if(document.regform.sex[0].checked)
{
var sex=1;
}
else
{
var sex=0;
}
var phone=document.getElementById("phone1").value+document.getElementById("phone2").value+document.getElementById("phone3").value;
var fax=document.getElementById("fax1").value+document.getElementById("fax2").value+document.getElementById("fax3").value;
var email=document.getElementById("email").value;
var mobile=document.getElementById("mobile").value;
var address=document.getElementById("street").value+","+document.getElementById("city").value+","+document.getElementById("country").value;
var probince=document.getElementById("vprobince").value;
var zip=document.getElementById("zip").value;
xmlHttp.open("POST", "user/saveuser.asp", true);
xmlHttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xmlHttp.onreadystatechange = saveuser;
xmlHttp.send("username="+escape(username)+"&password="+escape(password)+"&email="+escape(email)+"&truename="+escape(truename)+"&sex="+escape(sex)+"&phone="+escape(phone)+"&fax="+escape(fax)+"&mobile="+escape(mobile)+"&address="+escape(address)+"&probince="+escape(probince)+"&zip="+escape(zip));
}
}

function saveuser() {
if (xmlHttp.readyState < 4) {
d_username.innerHTML="loading...";
}
if (4==xmlHttp.readyState){
if (200==xmlHttp.status){
var date=xmlHttp.responseText;
if (date==1){
alert("用户注册成功!");
//window.location.href='//exhibit';
window.location.href="/";
}else{
alert("注册发生错误!");
window.location.href="breg.asp";
}
}else{
alert("error");
}
}

}

//当点击注册按钮后所进行的检测，如果所有必填项都写了则发送注册信息到user/saveuser.asp进行用户的注册
-->
</script>

相信上面的东西大家应该都看明白了．有不明白的可以加我QQ或者我的网站进行交流http://www.duku123.com

下面是页面布局的代码

<table width="80%" align="center" cellpadding="4" cellspacing="0" class="toptable">
<form id="regform" name="regform" method="post" action="breg.asp">
<tr>
<td height="35" colspan="3" align="center" class="blod12">请认真、仔细地填写以下信息，严肃的商业信息有助于您获得别人的信任，结交潜在的商业伙伴，获取商业机会！</td>
</tr>
<tr>
<td width="25%" height="30" align="right" class="blod12"><font color="#FF0000">*</font> User Name: </td>
<td width="37%" align="left" ><input name="user_name" type="text" class="input" id="user_name" size="30" onFocus="on_input('d_username')" onBlur="callServer()"/></td>
<td width="38%" align="left" id="d_username"> </td>
</tr>
<tr>
<td height="30" align="right" class="blod12"><font color="#FF0000">*</font> Pssword:</td>
<td align="left"><input name="password" type="password" class="input" id="password" size="30" onFocus="on_input('d_pass')" onBlur="out_pass()" /></td>
<td align="left" id="d_pass"> </td>
</tr>
<tr>
<td height="30" align="right" class="blod12"><font color="#FF0000">*</font> Confirm password: </td>
<td align="left"><input name="password2" type="password" class="input" id="password2" size="30" onFocus="on_input('d_pass2')" onBlur="out_pass2()"/></td>
<td align="left" id="d_pass2"> </td>
</tr>
<tr>
<td height="30" align="right" class="blod12"><font color="#FF0000">*</font> Name:</td>
<td align="left" class="blod16"><input name="truename" type="text" class="input" id="truename" size="30" onFocus="on_input('d_truename')" onBlur="out_truename()"/></td>
<td align="left" id="d_truename"> </td>
</tr>
<tr>
<td align="right" class="blod12"><font color="#FF0000">*</font> Sex:</td>
<td align="left"><input type="radio" name="sex" value="1" />
Male
<input type="radio" name="sex" value="0" />
Female</td>
<td align="left" id="d_sex"> </td>
</tr>
<tr>
<td height="40" align="right" class="blod12"><font color="#FF0000">*</font> Phone Number: </td>
<td colspan="2" align="left" ><table width="68%" cellspacing="0" cellpadding="0">
<tr>
<td>Country/Region code</td>
<td>Area code(if any) </td>
<td>Number</td>
</tr>
<tr>
<td><input name="phone1" type="text" class="input" id="phone1" value="86" size="15" maxlength="4" /></td>
<td><input name="phone2" type="text" class="input" id="phone2" size="15" /></td>
<td><input name="phone3" type="text" class="input" id="phone3" size="15" onFocus="on_input('d_phone')" onBlur="out_phone()"/></td>
</tr>
<tr style="disply:none" id="tr_phone">
<td colspan="3" id="d_phone"> </td>
</tr>
</table></td>
</tr>
<tr>
<td align="right"><span class="blod12">Fax Number: </span></td>
<td colspan="2" align="left"><table width="68%" cellspacing="0" cellpadding="0">
<tr>
<td>Country/Region code</td>
<td>Area code(if any) </td>
<td>Number</td>
</tr>
<tr>
<td><input name="fax1" type="text" class="input" id="fax1" value="86" size="15" /></td>
<td><input name="fax2" type="text" class="input" id="fax2" size="15" /></td>
<td><input name="fax3" type="text" class="input" id="fax3" size="15" /></td>
</tr>
</table></td>
</tr>
<tr>
<td align="right" class="blod12">Mobile:</td>
<td align="left"><input name="mobile" type="text" class="input" id="mobile" size="30" /></td>
<td align="left"> </td>
</tr>
<tr>
<td align="right" class="blod12"><font color="#FF0000">*</font> Email:</td>
<td align="left"><input name="email" type="text" class="input" id="email" size="30" onFocus="on_input('d_email')" onBlur="out_email()"/></td>
<td align="left" id="d_email"> </td>
</tr>
<tr>
<td align="right" class="blod12">Contace Address:</td>
<td colspan="2" align="left"><table width="90%" cellspacing="0" cellpadding="0">
<tr>
<td width="21%" align="left">Street Address</td>
<td width="79%" height="25"><input name="street" type="text" class="input" id="street" size="30" /></td>
</tr>
<tr>
<td align="left">city</td>
<td height="25"><input name="city" type="text" class="input" id="city" size="30" /></td>
</tr>
<tr>
<td align="left">Country/Region</td>
<td height="25"><select name="country" id="country" class="" tabindex="7" onChange="show()">
................................
<option value="Chad" >Chad</option>
<option value="Chile" >Chile</option>
<option value="China" >China</option>
<option value="Christmas Island" >Christmas Island</option>
<option value="Cocos (Keeling) Islands" >Cocos (Keeling) Islands</option>
...............
<option value="Zimbabwe" >Zimbabwe</option></select></td>
</tr>
<tr style="display:none" id="Probince">
<td align="left">Probince/State</td>
<td height="25"><select name="vprobince" id="vprobince">
<option value="华北地区" selected="selected">华北地区</option>
<option value="华东地区">华东地区</option>
<option value="华南地区">华南地区</option>
<option value="华中地区">华中地区</option>
<option value="东北地区">东北地区</option>
<option value="西北地区">西北地区</option>
<option value="西南地区">西南地区</option>
<option value="港澳台地区">港澳台地区</option>
</select></td>
</tr>
</table></td>
</tr>
<tr>
<td align="right" class="blod12">Zip/Postal Code:</td>
<td colspan="2" align="left"><input name="zip" type="text" class="input" id="zip" size="30" /></td>
</tr>
<tr>
<td align="right"><span class="blod12"><font color="#FF0000">*</font> Enter the code shown:</span></td>
<td align="left"><input name="code" type="text" class="input" id="code" size="15" onFocus="on_input('d_code')" onBlur="out_code()"/>
 <b><font color="#ff0000"><%=request.cookies("verifycode")%></font></b></td>
<td align="left" id="d_code"> </td>
</tr>
<tr>
<td align="right"> </td>
<td colspan="2" align="left"><p>
<input name="regtxt" type="checkbox" id="regtxt" value="checkbox" onClick="out_reg()"/>
I agree to the following<br />
·I accept thewww.duku123.comTerms of Use Agreement<br />
·I may receive occasional emails relevant towww.duku123.commembership and services</p>
<div id="d_regtxt"></div> </td>
</tr>
<tr>
<td colspan="3" align="center"><table width="94%" cellspacing="0" cellpadding="0">
<tr>
<td height="35" align="center" bgcolor="EFF4FA"><input name="regbutton" type="button" id="regbutton" onClick="chk_reg()" value=" Submit"/>
<div id="save_stat"></div></td>
</tr>
</table></td>
</tr>
<tr>
<td height="10" align="center"></td>
<td colspan="2" align="center"></td>
</tr></form>
</table>
下面是生成随机验证码的代码

<%
Randomize
Do While Len(rndnum)<4
num1=CStr(Chr((57-48)*rnd+48))
rndnum=rndnum&num1
Loop
response.cookies("verifycode")=rndnum
%>
这段应该不用我解释了．只是生成四个随机数字

最后是saveuser.asp的核心代码

]<!-- #include file="../web_conn.asp" -->
<%
Response.ContentType = "text/html"
Response.Charset = "utf-8"
'因为我做的是国际版，所以用的是utf-8编码，以防止出现乱码
username=trim(request("username"))
...................
省略Ｎ行，这只是接受传过来的注册参数
set jrs=server.CreateObject("adodb.recordset")
jsql="select username,id from 表名　where username='"&username&"'"
jrs.open jsql,conn,1,1
if jrs.eof and jrs.bof then
set rs=server.CreateObject("adodb.recordset")
sql="select * from 表名 where id is null"
rs.open sql,conn,1,3
rs.addnew
．．．．．．．．．
省略只是做字段的写入操作
rs.update
Session("username")=username　'写session
response.Cookies("username")=username '写cookies
rs.close
set rs=nothing
response.write "1"
'如果注册成功返回1，在前面的js代码里进行接收，如果收到1则跳出对话框注册成功
else
response.write "0"
'发生错误，即注册失败返回0
end if
jrs.close
set jrs=nothing
response.Cookies("verifycode")=""
'清除验证码以防止表单的重复提交
%>

差点忘了用户检测页面的代码了checkuser.asp

<!-- #include file="../inc/web_conn.asp" -->
<%
Response.ContentType = "text/html"
Response.Charset = "utf-8"
username=trim(request("username"))
set rs=server.createobject("adodb.recordset")
sql="select username,id from 表名 where username='"&username&"'"
rs.open sql,conn,1,1
if rs.bof and rs.eof then
response.write "1"
else
response.write "0"
end if
rs.close
set rs=nothing
%>
经过上面的解释这段应该已经很明白了．就不写注释了．如此一来就实现了如今流行的ajax表单检测和提交,最好附上以前我写的那篇文章的地址，以作为参考: http://www.duku123.com/upload/?action-viewnews-itemid-387
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航