Chinapromoter Blog

生活, 艺术, 网络, 技术, 工业, 消费, 记录趣味生活的点点滴滴。

« 踏浪歌词、试听阿朵代言的夏娃之秀“魔力挺”惨遭山寨, 真假难辩 »

注册页面表单增加AJAX验证功能 - SXWO EC 优化

用户名是否唯一采用AJAX异步验证,当输入用户名后失去焦点时,启动异步验证程序。从数据库验证是否为唯一,如果输入的用户名已被注册,会返回相应的值,根据相应返回的值选择弹出警告框。邮件地址的异步验证也是同样的方法。

文件修改:在register,htm 页面头部增加一个外部JAVASCRIPT 库文件(jquery 库)
<script language="JavaScript" type="text/JavaScript" src="jquery-1.3.2.min.js"></script>

增加JAVASCRIPT 代码如下:

<script  type="text/JavaScript">


$(function(){
 
  $("#username").blur(function() {
   
      var $username=$("#username").attr("value");

   $.post("checkform.asp",{
        act:"check_name",
   username:$username
   },function(data, textStatus) {
   if (data=="erro") {
   alert ($username+"  已经被注册,请重新输入用户名!")
   $("#username").attr("value","").focus();

   }
  
  });

   });


    $(".e_mail").blur(function() {
   
      var $e_mail=$(".e_mail").attr("value");

   $.post("checkform.asp",{
        act:"check_emial",
   e_mail:$e_mail
   },function(data, textStatus) {
   if (data=="erro") {
  
   alert ($e_mail+"  已经被注册,请重新输入电子邮箱地址!")
      $(".e_mail").attr("value","").focus();
   }
  
  });

   });
 
 $("#submit2").click(function() {
   var $username=$("#username").attr("value");
   var $psw_1=$(".psw_1").attr("value");
   var $psw_2=$(".psw_2").attr("value");
   var $e_mail=$(".e_mail").attr("value");
 
  //alert ($username);
 
  if ($username=="" || $username.length<3) {
     alert ("用户名不能为空或不能少于三位!");
  $("#username").focus();
       return false;
  }else if ($psw_1=="" || $psw_1.length<3) {
     alert ("密码不能为空或不能少于三位!");
  $(".psw_1").focus();
  return false;
 
  }else if ($psw_2=="") {
    alert ("请再次输入密码以验证!");
 $(".psw_2").focus();
 return false;
  }else if ($psw_1 != $psw_2) {
    alert ("两次输入的密码不同,请检查!");
 $(".psw_1").focus();
 return false;
  }else if ($e_mail=="" || ($e_mail!="" && !/.+@.+\.[a-zA-Z]{2,4}$/.test($e_mail))) {
     alert ("电子邮箱地址不能为空或格式正确!");
  $(".e_mail").focus();
  return false;
  }
  });

});

</script>

在表单的几处input 增加类选择器用来定位的
<input name="userpass" type="password"  size="19" maxlength="15"  class="psw_1">
<input name="userpass1" type="password" size="19" maxlength="15" class="psw_2">
<input name="email" type="text" size="40" maxlength="48" class="e_mail">


在member 目录下增加 文件:
jquery-1.3.2.min.js
checkform.asp

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

日历

最新评论及回复

最近发表


Powered By Z-Blog 1.8 Spirit Build 80605

Copyright www.chinapromoter.cn. Some Rights Reserved. 浙ICP备05022498号