注册信息验证(小小特效)+ajax回调检测用户名

  <script type="text/javascript" src="http://www.cnblogs.com/js/jquery.js"></script>
  <script type="text/javascript">
    function getRealLength(str){
       return str.replace(/[^\x00-\xff]/g, '**').length;
      }
   $(document).ready(function(){
      $("#ctl00_ContentPlaceHolder1_login_name").click(function(){
          $("#loginid_info").removeClass("note");}).blur(function(){
              if(($("#ctl00_ContentPlaceHolder1_login_name").val().length<5)||($("#ctl00_ContentPlaceHolder1_login_name").val().length>20))
              { $("#loginid_info").html("<span style=\"color:red\">输入长度不在4-20字条之间</span>");
              
              }
              else
              {
               $("#loginid_info").html("用户名检测中.....");
                 $.ajax({
                                "type": "get",
                                 "url":"ajax.aspx?userid="+$("#ctl00_ContentPlaceHolder1_login_name").val(),
                                 "success": function(data) {
//                                 alert(data);
//                                 if(data=="0")
//                                 {
                                     $("#loginid_info").html(data);
//                                 }
//                                 else if(data=="1")
//                                 {
//                                    $("#loginid_info").html("<span style=\"color:red\">数据库已存在该会员,请重新填写!</span>");
//                                 }
                                },
                                "error": function(){
                               $("#loginid_info").html(data);
                              }

                      });
               
              }
          })
    });
    $(document).ready(function(){  
        $("#ctl00_ContentPlaceHolder1_password").click(function(){
          $("#password_info").removeClass("note");}).blur(function(){
              if(($("#ctl00_ContentPlaceHolder1_password").val().length<6)||($("#ctl00_ContentPlaceHolder1_password").val().length>20))
              {
                  $("#password_info").html("<span style=\"color:red\">输入长度不在6-20字条之间</span>");
              }
              else
              {
               
                $("#password_info").html("");
              }
          })
     });
  
     $(document).ready(function(){  
        $("#ctl00_ContentPlaceHolder1_confirm_password").click(function(){
          $("#confirm_password_info").removeClass("note");}).blur(function(){
              if($("#ctl00_ContentPlaceHolder1_confirm_password").val()!=$("#ctl00_ContentPlaceHolder1_password").val())
              {$("#confirm_password_info").html("<span style=\"color:red\">两次密码输入不一致!</span>");
              }
              else
              {
                $("#confirm_password_info").html(" ");
              }
          })
     });  
      $(document).ready(function(){  
        $("#ctl00_ContentPlaceHolder1_tEmail").click(function(){
          $("#email_info").removeClass("note");}).blur(function(){
            var regemail=/^([_a-zA-Z0-9-]{2,})+@(([_a-zA-Z0-9-]{2,})+\.)+[a-zA-z]{2,3}$/;
          if (!regemail.test($("#ctl00_ContentPlaceHolder1_tEmail").val()))
          {
               $("#email_info").html("<span style=\"color:red\">邮箱格式输入不正确!</span>");
              }
              else
              {
                $("#email_info").html(" ");
              }
          })
     });
  
   $(document).ready(function(){  
        $("#ctl00_ContentPlaceHolder1_tMemberTelephone").click(function(){
          $("#mobile_info1").removeClass("note");}).blur(function(){
              if( $("#ctl00_ContentPlaceHolder1_tMemberTelephone").val()=="")
              {$("#mobile_info1").html("<span style=\"color:red\">输入不能为空!</span>");
              }
              else
              {
                $("#mobile_info1").html(" ");
              }
          })
     });  
    </script>
    <!--// register start -->
      <div id="register">
     <div class="rightinfo">
      <div class="title">
       <ul>
        <li>设置你的账户信息</li>
       </ul>
      </div>
      <div class="content">
       <div id="name">
        <div id="loginid_info_check" class="text">会员登录名</div>
        <div class="redstar">*</div>
       </div>
       <div class="input">
        <input type="text" class="note"  id="login_name"  runat="server"/>
       </div>
       <div id="loginid_info" class="note">
        由4-20个字母或数字组成。不支持中文,不能以数字开头,注册成功后不可修改。
       </div>
      </div>
      <div class="content">
       <div id="name">
        <div id="password_info_check" class="text">&nbsp;密码</div>
        <div class="redstar">*</div>
       </div>
       <div class="input">
        <input type="password" id="password" class="note" runat="server"/>
       </div>
       <div id="password_info" class="note">
        由6-20个字母(区分大小写)或数字组成。
       </div>
      </div>
      <div class="content">
       <div id="name">
        <div id="confirm_password_info_check" class="text">&nbsp;重复输入密码</div>
        <div class="redstar">*</div>
       </div>
        <div class="input">
         <input type="password" id="confirm_password" class="note" value=""   runat="server"/>
        </div>
        <div id="confirm_password_info" class="note">请再输入一遍您上面填写的密码。</div>
       </div>
      </div>
      <div class="title">
       <ul>
        <li>姓名和联系方式</li>
       </ul>
      </div>
      <div class="content">
       <div id="name">
        <div id="first_name_info_check" class="text">&nbsp;真实姓名</div>
        <div class="redstar">*</div>
       </div>
       <div class="input">
        <input id="tRealName" class="note" type="text" value="" runat="server" />
       </div>
       <div id="first_name_info" class="note">&nbsp;</div>
      </div>
      <div class="content">
       <div id="name">
        <div id="title_info_check" class="text">&nbsp;性别</div>
        <div class="redstar">*</div>
       </div>
       <div id="memberTitle" class="input">
                &nbsp;<asp:RadioButtonList ID="tSex" runat="server" RepeatDirection="Horizontal"
                  RepeatLayout="Flow">
                  <asp:ListItem Selected="True" Value="0">男</asp:ListItem>
                  <asp:ListItem Value="1">女</asp:ListItem>
                </asp:RadioButtonList></div>
       <div id="name" class="note">&nbsp;</div>
      </div>
      <div class="content">
       <div id="name">
        <div class="text" id="job_title_info_check">&nbsp;职业</div>
        <div class="redstar">*</div>
       </div>
       <div class="input">
         <asp:DropDownList ID="ddlMemberJob" runat="server" Width="90%">
               <asp:ListItem Text="金融业"></asp:ListItem>
               <asp:ListItem Text="计算机业"></asp:ListItem>
               <asp:ListItem Text="商业"></asp:ListItem>
               <asp:ListItem Text="服务行业"></asp:ListItem>
               <asp:ListItem Text="工程师"></asp:ListItem>
               <asp:ListItem Text="主管、经理"></asp:ListItem>
               <asp:ListItem Text="制造业"></asp:ListItem>
               <asp:ListItem Text="销售/广告/市场"></asp:ListItem>
               <asp:ListItem Text="其他行业"></asp:ListItem>
             </asp:DropDownList>
       </div>
       <div class="note" id="job_title_info">&nbsp;</div>
      </div>
      <div class="content">
       <div id="name">
        <div class="text" id="email_info_check">&nbsp;电子邮箱</div>
        <div class="redstar">*</div>
       </div>
       <div class="input"><input maxlength="50" id="tEmail" type="text" value="" runat="server" /></div>
       <div class="note" id="email_info">输入你的邮箱</div>
      </div>
      <div class="content">
       <div id="name">
        <div class="text" id="phone_info_check">&nbsp;固定电话</div>
        <div class="redstar">*</div>
       </div>
       <div class="inputwidth" style=" 371px">
        <div class="input2">
                  &nbsp;
        <input id="tMemberTelephone" value="" type="text" maxlength="16" runat="server" /></div>
       </div>
      </div>
      <div class="content" id="mobile_info1">
      
      
      </div>
      <div class="content" id="tele">
       <div id="name">
        <div class="text" id="mobile_info_check">手机</div>
        <div class="redstar">&nbsp;</div>
       </div>
       <div class="input">
        <input id="tMemberMobile" value="" type="text" maxlength="16" runat="server" />
       </div>
       <div class="note" id="mobile_info">&nbsp;</div>
      </div>
      
     <div id="operation1">
      <input type="submit" name="Submit" value="提交注册信息" class="button" id="Submit1" onclick="return CheckForms2();" onserverclick="Submit1_ServerClick" runat="server" />
     </div>
    </div>

原文地址:https://www.cnblogs.com/zyosingan/p/1215425.html