asp/php+ajax无刷新会员注册/验收

JS表单验证的两种常规写

支持IE/Firefox

Aug 18

, 08/08/18 17:39 , 技术开发 , 评论(0) , 引用(0) , 阅读(2783) , Via 本站原创

大 | 中 | 小

ajax现已应用到各个网站中。最常见的如会员注册这块，实现快捷。用户体验良好，blog插件添加过了，注册界面可以直接预览html文件。其实主要在于XMLHttpRequest对象读取也替换页面来实现的。对于asp/php或其他环境方法都是一致的，功能就是查库告诉js中，是不是有存在的数据。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
  <HEAD>
  <TITLE> 用户注册 </TITLE>
 </HEAD>
 <style>
 
 </style>
 <BODY>
  <script language=javascript>
  <!--
  function checkUserName()
  {
   username=this.form1.username.value;
   var xmlhttp;
   try
   {
  xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
   }
   catch (e)
   {
     try
     {
       xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
     }
     catch (e)
     { 
     try
     {
   xmlhttp=new XMLHttpRequest();
     }
     catch (e)
     {
     }
     }
   }
  if (username=="")
  {
    msg="用户名不能为空";
 var ch=document.getElementById("check1");
 ch.innerHTML="<font color='#aaaaaa'>"+msg+"</font>";    
 return false;
  }

/* 
  * zhoz.com 2008/08/18
  * 创建请求，并使用escape对username编码，以避免乱码
  * 这里用的是ASP作查询的接口文件。
  * 如果用PHP的，需要修改为：xmlhttp.open("get","zhoz_checklogin.php?username=" + document.getElementById ("username").value" +  new Date().getTime());
  * new Date()加这个是为了清空缓存，保持数据为最新数据
  */
xmlhttp.open("get","zhoz_checklogin.php?username=" + escape(document.getElementById ("username").value) + "&zhoz_tempid=" + new Date().getTime());
   xmlhttp.onreadystatechange=function()
   {
     if(4==xmlhttp.readyState)
  {
    if(200==xmlhttp.status)
    {
      if (xmlhttp.responseText=="yes")
      { 
     msg="此用户名已经存在";
      }
   else
   {
    msg="输入正确";
   }  
    }
    else
    {
      msg="网络链接失败";
    }
    var ch=document.getElementById("check1");
    ch.innerHTML="<font color='#aaaaaa'>"+msg+"</font>";    
  }
   }
   xmlhttp.send(null);  
   return false;
   }

</script>

if(Temp==""){ 
 msg="此项不能为空"; 
 }
 else
 {  
      if(Temp.length<6||Temp.length>20)
   {
     msg="密码必须在6~20个字符之间";
   }
   else
   {
  var Inputname1="password";
     eval("Temp1="+Form+Inputname1+".value");
  if (Temp!=Temp1)
  {
          eval(Form+Inputname+".value='';");
    eval(Form+Inputname1+".value='';");
    eval(Form+Inputname1+".focus();");
    msg="两次密码不一样！"; 
    msg1="";
    var ch1=document.getElementById("password2");
    ch1.innerHTML="<font color='#aaaaaa'>"+msg1+"</font>";
  }
  else
  {
    msg="输入正确";
  }
   }
 }
 var ch=document.getElementById("password3");
 ch.innerHTML="<font color='#aaaaaa'>"+msg+"</font>"; 
  }
    function checkpass()
  {
    var Inform="form1";
 var Inputname="password";
    var Form=Inform+"."
    eval("Temp="+Form+Inputname+".value;");

if(Temp==""){ 
  msg="此项不能为空"; 
 } else {  
      if(Temp.length<6||Temp.length>20)
   {
     msg="密码必须在6~20个字符之间";
   }
   else
   {
     msg="输入正确";
   }
 }
 var ch=document.getElementById("password2");
 ch.innerHTML="<font color='#aaaaaa'>"+msg+"</font>";
  }
 </script>
 <script language=javascript>
 function sendreg()
 {
  if(this.form1.username.value=="")
  {
    alert('请输入要注册的用户名');
 this.form1.username.focus();
 return false;
  }
  if(this.form1.password.value=="")
  {
   alert('请输入密码');
   this.form1.password.focus();
   return false;
  }
  else
  {
    if(this.form1.password.value.length<6
    ||this.form1.password.value.length>20)
 {
  alert('密码长度必须在6~20个字符');
  this.form1.password.focus();
  return false;
 }
  }
   if(this.form1.password1.value=="")
  {
   alert('请输入密码');
   this.form1.password1.focus();
   return false;
  }
  else
  {
    if(this.form1.password1.value.length<6
||this.form1.password1.value.length>20)
 {
  alert('密码长度必须在6~20个字符');
  this.form1.password1.focus();
  return false;
 }
  }
  if(this.form1.password.value!=this.form1.password1.value)
  {
    this.form1.password.value="";
 this.form1.password1.value="";
 this.form1.password.focus();
 alert('两次密码不一样，请重新输入');
 return false;
  }
   username=this.form1.username.value;
   password=this.form1.password.value;
   var xmlhttp;
   try
   {
  xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
   }
   catch (e)
   {
     try
     {
       xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
     }
     catch (e)
     { 
     try
     {
   xmlhttp=new XMLHttpRecordset();
     }
     catch (e)
     {
     }
     }
   }

//创建请求，并使用escape对username编码，以避免乱码
  xmlhttp.onreadystatechange=function() {
  if(4==xmlhttp.readyState) {
    if(200==xmlhttp.status) {
      if (xmlhttp.responseText=="yes") {
        this.form1.username.value="";
        this.form1.password.value="";
        alert('注册成功');
      } else {
        this.form1.password.value="";
        this.form1.password1.value="";
        alert('注册失败');   
      }
    } else {
      alert('网络连接失败');
    }
  }
   }
  //打开连接,向库中添加注册数据。
  xmlhttp.open("post","regok.asp",true)
  xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
  //发送数据
  xmlhttp.send("username="+escape(username)+"&password="+escape(password));
 }
 </script>
  <div align="center">
  <TABLE border=1 cellpadding=0 cellspacing=0 width=500>
  <form name="form1" method="post">
  <TR>
 <TD colspan=2 align="center" height=25><b>用户注册</b></TD>
  </TR>
  <TR>
 <TD align=right width=100>用户名</TD>
 <TD><input type=text size=30 name="username" onBlur="return checkUserName();"> <span id="check1"></span></TD>
  </TR>
   <TR>
 <TD align=right>密码</TD>
 <TD align=left><input type=password size=30 name="password" onBlur="checkpass();" maxlength=20> <span id="password2"></span>
</TD>
  </TR>
    <TR>
 <TD align=right>确认密码</TD>
 <TD align=left><input type=Password size=30 name="password1" onBlur="checkpass1();" maxlength=20> <span id="password3"></span></TD>
  </TR>
  <TR>
 <TD align="center" colspan=2>
<input type="button" value="注册" onclick="return sendreg();" maxlength=20> <input type="reset" value="重置"></TD>
  </TR>
  </form>
  </TABLE>
  </div>
 </BODY>
</HTML>

Array文件命名为：zhoz_checklogin.asp

Array文件命名为：zhoz_checklogin.php 并修改上面的js中的内容

< 2024 > < 4 >
日	一	二	三	四	五	六
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

Everyday NetLog

asp/php+ajax无刷新会员注册/验收

公告

分类

日历

统计

最新日志

最新评论

链接

归档

其他