• 注册信息验证(小小特效)+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>

  • 相关阅读:
    敏捷实践-学习实践资料汇总
    从数据仓库到数据湖—浅谈数据架构演进
    JVM知识点汇总备忘
    Protobuf的使用和原理
    kafka数据定时导入hive便于后续做数据清洗
    Mybatis Mapper接口动态代理实现原理及二次开发
    软考论文-写作大纲-备考思路总结
    css3另一个属性写法
    css3动画效果
    jquery点击鼠标后关闭图片
  • 原文地址:https://www.cnblogs.com/zyosingan/p/1215425.html
Copyright © 2020-2023  润新知