註冊資訊驗證(小小特效)+ajax回調檢測使用者名稱

來源:互聯網
上載者:User

  <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="width: 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>

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.