<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="Web.m.forget._default" %>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
    <title></title>
<meta name="format-detection" content="telephone=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link type="text/css" rel="stylesheet" href="../css/reset.css" />
<link type="text/css" rel="stylesheet" href="../css/base.css" />
<script type="text/javascript" src="../js/touch.js"></script>

  <!-- Including Modernizr to test for touch support. -->
  <script src="../js/modernizr.custom.js"></script>

             <style type="text/css">
        .default {display: inline-block;width: 70px;height: 30px;line-height: 30px;background: #ddd;text-align: center;margin: 4px 2px;background: #eeeeee;}
        .weak {display: inline-block;width: 70px;height: 30px;line-height: 30px;background: #ddd;text-align: center;margin: 4px 2px;background: #FF0000;}
        .medium {display: inline-block;width: 70px;height: 30px;line-height: 30px;background: #ddd;text-align: center;margin: 4px 2px;background: #FF9900;}
        .strong {display: inline-block;width: 70px;height: 30px;line-height: 30px;background: #ddd;text-align: center;margin: 4px 2px;background: #33CC00;}
        .spana {display: inline-block;width: 70px;height: 30px;line-height: 30px;background: #ddd;text-align: center;margin: 4px 2px;}
        .style1{color: #FF0000; }
        </style>
    <script type="text/javascript">
        window.onload = function () {

            var oInput = document.getElementById('tbResetpass1');
            oInput.value = '';
            oInput.onkeyup = function () {
                //强度状态设为默认
                span0.className = span1.className = span2.className = "default";
                var pwd = this.value;
                var result = 0;
                for (var i = 0, len = pwd.length; i < len; ++i) {
                    result |= charType(pwd.charCodeAt(i));
                }

                var level = 0;
                //对result进行四次循环，计算其level
                for (var i = 0; i <= 4; i++) {
                    if (result & 1) {
                        level++;
                    }
                    //右移一位
                    result = result >>> 1;
                }

                if (pwd.length >= 6) {
                    switch (level) {
                        case 1:

                            span0.className = "weak";
                            break;
                        case 2:

                            span0.className = "medium";
                            span1.className = "medium";
                            break;
                        case 3:
                        case 4:


                            span0.className = "strong";
                            span1.className = "strong";
                            span2.className = "strong";
                            break;
                    }
                }
            }
        }
        /*
            定义一个函数，对给定的数分为四类(判断密码类型)，返回十进制1，2，4，8
            数字 0001 -->1  48~57
            小写字母 0010 -->2  97~122
            大写字母 0100 -->4  65~90
            特殊 1000 --> 8 其它
        */
        function charType(num) {
            if (num >= 48 && num <= 57) {
                return 1;
            }
            if (num >= 97 && num <= 122) {
                return 2;
            }
            if (num >= 65 && num <= 90) {
                return 4;
            }
            return 8;
        }
    </script>  

    <style type="text/css">
        .style1
        {
            color: #FF0000;
        }
    </style>
</head>

<body class="bg15">
    <form id="form1" runat="server">

    <div class ="biaoti" style =" padding-top :20px;font-size :x-large  ">  <asp:Label ID="biaoti" runat="server"></asp:Label></div>
   <section id="container">
<figure>
    <div class ="login ">
   
        <asp:RadioButtonList ID="RadioButtonList1" runat="server" AutoPostBack="True" 
            RepeatDirection="Horizontal" 
                            onselectedindexchanged="RadioButtonList1_SelectedIndexChanged" RepeatLayout="Flow">
            <asp:ListItem Selected="True">邮箱找回</asp:ListItem>
            <asp:ListItem>手机找回</asp:ListItem>
        </asp:RadioButtonList>

    </div>
     <asp:Panel ID="Panel1" runat="server" Visible ="false" >
    <div class ="login ">
       <asp:TextBox ID="tbMobile" runat="server"  CssClass="login-field login-field-password" placeholder="请输入手机号码" ></asp:TextBox>
      </div>

       <div class="tab-iteam" >
    <div class="tab-iteam-con">
    	<div class="con" style="margin-top:30px">
                    <asp:LinkButton ID="btForget" runat="server" onclick="btForget_Click" Text="发送验证码" 
                           CssClass="more" ValidationGroup="forget" />

		</div>
    </div>
</div>
         <div style =" text-align :center; font-size :12px;   margin-bottom :30px; margin-top :10px; ">
                                         <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" 
                                    ControlToValidate="tbMobile" Display="Dynamic" ErrorMessage="请填写手机号" 
                                    ValidationGroup="forget" ForeColor="Red"></asp:RequiredFieldValidator>
                    <asp:RegularExpressionValidator ID="RegularExpressionValidator14" 
                        runat="server" ControlToValidate="tbMobile" Display="Dynamic" 
                        ErrorMessage="请输入正确的手机号码" 
                        ValidationExpression="^1\d{10}$" 
                        ValidationGroup="forget" ForeColor="#FF0066" ></asp:RegularExpressionValidator>
         </div> 
         </asp:Panel> 


     <asp:Panel ID="Panel4" runat="server" >
    <div class ="login ">
               <asp:TextBox ID="tbEmail" runat="server"  placeholder="请输入电子邮箱" 
            CssClass="login-field login-field-password"></asp:TextBox>
      </div>

       <div class="tab-iteam" >
    <div class="tab-iteam-con" >
    	<div class="con" style="margin-top:30px">
          <asp:LinkButton ID="btForget_Email" runat="server" onclick="btForget_Email_Click" Text="发送验证码到邮箱" 
                             CssClass="more" ValidationGroup="forget" />

		</div>
    </div>
</div>
     <div style =" text-align :center; font-size :12px;   margin-bottom :30px; margin-top :10px; ">
                                                            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" 
                                    ControlToValidate="tbEmail" Display="Dynamic" ErrorMessage="请填入邮箱" 
                                    ValidationGroup="forget" ForeColor="Red"></asp:RequiredFieldValidator>
                    <asp:RegularExpressionValidator ID="RegularExpressionValidator1" 
                        runat="server" ControlToValidate="tbEmail" Display="Dynamic" 
                        ErrorMessage="邮箱格式不正确" 
                        ValidationExpression="\w+([-+.]\w+)*@\w+([-.]\w+)*.[a-zA-Z0-9]{2,7}" 
                        ValidationGroup="forget" ForeColor="Red"></asp:RegularExpressionValidator>
         </div> 
         </asp:Panel> 


     <asp:Panel ID="Panel2" runat="server" Visible ="false" >
    <div class ="login ">
        <asp:TextBox ID="tbYanzheng" runat="server"  CssClass="login-field login-field-password"
         placeholder="验证码" Visible ="True" ></asp:TextBox>
     </div>

       <div class="tab-iteam" >
    <div class="tab-iteam-con" >
    	<div class="con" style="margin-top:30px">

                  <asp:LinkButton ID="btyanzheng" runat="server"  Text="验证"  CssClass="more"
                            ValidationGroup="yanzheng" onclick="btyanzheng_Click" />

		</div>
    </div>
</div>
      <div style =" text-align :center; font-size :12px;   margin-bottom :30px; margin-top :10px; ">
          
                                <asp:RequiredFieldValidator ID="RequiredFieldValidator7" runat="server" 
                                    ControlToValidate="tbYanzheng" Display="Dynamic" ErrorMessage="请填写验证码" 
                                    ValidationGroup="yanzheng" ForeColor="Red"></asp:RequiredFieldValidator>
                    <asp:RegularExpressionValidator ID="RegularExpressionValidator16" 
                        runat="server" ControlToValidate="tbYanzheng" Display="Dynamic" 
                        ErrorMessage="请输入数字" 
                        ValidationExpression="^\d{6}$" 
                        ValidationGroup="yanzheng" ForeColor="#FF0066"></asp:RegularExpressionValidator>
          </div>
         </asp:Panel> 


     <asp:Panel ID="Panel3" runat="server" Visible ="false" >
    <div class ="login ">
     <asp:TextBox ID="tbResetpass1" runat="server"  CssClass="login-field login-field-password"
         placeholder="请输入密码"              TextMode="Password" ></asp:TextBox></div> 
           <div class ="login ">
         <span id="span0" class ="spana">弱</span><span id="span1"  class ="spana">中</span><span id="span2"  class ="spana">强</span>
  <div id ="psdnote"  runat ="server"  style ="padding-top :10px;font-size :12px">密码不少于6位。</div>  
      </div>
<div style =" text-align :center; font-size :12px; margin-bottom :10px; margin-top :10px; ">
                                <asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" 
                                    ControlToValidate="tbResetpass1" Display="Dynamic" ErrorMessage="请填写密码" 
                                    ValidationGroup="reset" ForeColor="Red"></asp:RequiredFieldValidator>
                                <asp:RegularExpressionValidator ID="RegularExpressionValidator15" runat="server" 
                                    ControlToValidate="tbResetpass1" Display="Dynamic" ErrorMessage="密码不合规范" 
                                    ValidationExpression="^[a-zA-Z0-9\u4e00-\u9fa5]{6,20}" 
                                    ValidationGroup="reset" ForeColor="Red"></asp:RegularExpressionValidator></div>
    
      <div class ="login ">        <asp:TextBox ID="tbResetpass2" runat="server" CssClass="login-field login-field-password"
                   placeholder="请再输入一遍密码"    TextMode="Password"></asp:TextBox></div> 

<div style =" text-align :center; font-size :12px;   margin-bottom :10px; margin-top :10px; ">
                                <asp:RequiredFieldValidator ID="RequiredFieldValidator6" runat="server" 
                                    ControlToValidate="tbResetpass2" Display="Dynamic" ErrorMessage="请再填一次密码" 
                                    ValidationGroup="reset" ForeColor="Red"></asp:RequiredFieldValidator>
                        <asp:CompareValidator ID="CompareValidator1" runat="server" 
                            ControlToCompare="tbResetpass1" ControlToValidate="tbResetpass2" 
                            Display="Dynamic" ErrorMessage="两次输入不一致" ForeColor="Red" 
                            ValidationGroup="reset"></asp:CompareValidator></div>




       <div class="tab-iteam"  >
    <div class="tab-iteam-con">
    	<div class="con" style="margin-top:30px">
                                 <asp:LinkButton ID="btReset" runat="server" onclick="btReset_Click" Text="提交" 
                         CssClass="more" ValidationGroup="reset" />
                        <asp:Label ID="lbUser" runat="server" Visible="False"></asp:Label>



		</div>
    </div>
</div>
  
         </asp:Panel> 
           
    <div id ="divinfo" runat ="server"  style =" font-size :x-large  " ></div>






</figure>


    


    </section><!--summary end-->
   </form>

<script>
    document.write('<script src=../js/' +
('__proto__' in {} ? 'zepto.custom' : 'jquery') +
'.js><\/script>')
</script>

<!-- Include the plugin. Yay! -->
<script src="../js/hideShowPassword.min.js" charset="gbk"></script>

<script>
    // Example 2
    $('#tbPassword').hideShowPassword({
        // Make the password visible right away.
        show: false,
        // Create the toggle goodness.
        innerToggle: true,
        // Give the toggle a custom class so we can style it
        // separately from the previous example.
        toggleClass: 'my-toggle-class',
        // Don't show the toggle until the input triggers
        // the 'focus' event.
        hideToggleUntil: 'focus',
        // Enable touch support for toggle.
        touchSupport: Modernizr.touch
    });
</script>
</body>
</html>
