web忘记密码

最新推荐文章于 2023-12-16 02:17:08 发布

Revival_Liang

最新推荐文章于 2023-12-16 02:17:08 发布

阅读量1.2k

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/Revival_Liang/article/details/71336600

版权

web 专栏收录该内容

75 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			 @font-face {font-family: "iconfont";
          src: url('fonts/iconfont.eot'); /* IE9*/
          src: url('fonts/iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
          url('fonts/iconfont.woff') format('woff'), /* chrome, firefox */
          url('fonts/iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
          url('fonts/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
        }

        .iconfont {	
        display: inline-block;
          font-family:"iconfont" !important;
          font-size:15px;
          font-style:normal;
          -webkit-font-smoothing: antialiased;
          -webkit-text-stroke-width: 0.2px;
          -moz-osx-font-smoothing: grayscale;
          vertical-align: middle;
          color: #00FF00;
        }
			*{margin: 0px;padding: 0px;}
			ul{list-style: none;}
			em{font-style: normal;}
			li{display: inline-block;}
			hr{width: 70px;margin-left: -35px;border-top-width: 2PX; margin-top: 11px; border-top: 1px dotted #d8d8d8;display: inline-block; position: absolute;}
			.hook{margin-left: 10px;}
			.com_gray{color: #999999;}
			.forget{width: 980px;height: 370px;margin: 50px auto; border: 1px solid #E6E6E6; border-top: 1px solid red;text-align: center;}
			.forget_nav{width: 490px;height: 50px;display: inline-block; margin-top: 47px;font-size: 0px;line-height: 0px;position: relative;}
			.forget_nav>li{width: 122px;height: 50px;font-size: 14px;line-height: 14px;vertical-align: top;text-align: center;float: left; position: relative;}
			.forget_nav span,.forget_nav strong{font-size: 14px;line-height: 18px;display: block;color: #999999;}
			.forget_nav span{width: 30px;height: 30px;line-height: 30px;margin-bottom: 10px; display: inline-block; border-radius: 50%;color: #999999; background: url(img/cir1.png);}
			.forget_nav .active{color: white; background: url(img/cir2.png);}
			.forget_nav .ok{background: url(img/cir_hook.png);}
			.forget_content{width: 100%;height: 100%;position: relative; }
			.forget_content>li{width: 100%;height: 100%;text-align: center; position: relative;overflow: hidden; display: none;}
			.forget_content_name>div{width: 330px;height: 50px;border-radius: 2px;text-align: left;position: relative;  display: inline-block;}
			.forget_content_name .one{margin-top: 75px;margin-bottom: 10px;padding-left: 10px; border: 1px solid #E6E6E6;box-sizing: border-box;}
			.forget_content_name .one div>span{height: 50px;margin-left: 10px; line-height: 50px;display: inline-block;color: #333333;}
			.forget_content_name .one input{width: 220px; height: 30px;line-height: 30px; margin-top: 10px; font-size: 14px; margin-left: 10px; border: none;outline: none;}
			.forget_content_name .two button{width: 100%;height: 100%;font-size: 14px; border: none;outline: none;color: white; background: red;}
			.forget_hint{width: 120px;height: 40px;top: 2.5px; right: -65px;font-size: 14px;display: none; text-align: center; font-style: normal; position: absolute; color: red;background: url(img/left_frame.png);}
			.triangle_left{width: 0px;height: 0px;top: 11px;left: -9px; border-width:9px 9px 9px 0px;border-style: dashed;border-color:transparent #E6E6E6 transparent transparent;position: absolute;}
			.triangle_left_span{width: 0px; height: 0px;border-width:8px 8px 8px 0px;left: 1px;top: -8px;display: inline-block; position: absolute; border-style: dashed;border-color:transparent #FFF4D7 transparent transparent;}
			.forget_hint>span{height: 40px !important; line-height: 40px !important; font-size: 12px;line-height: 12px;color: #333333 !important;}
			.forget_ver{width: 330px;height: 175px;margin-top: 67px; display: inline-block;}
			#ver_hint_text{font-size: 12px;line-height: 25px; text-align: left;display: inline-block; color: #333333;position: relative;}
			.forget_ver_code{width: 100%;height: 50px;margin-top: 10px; text-align: left;position: relative;}
			#forget_ver_code_next{width: 100%;height: 50px;margin-top: 15px;font-size: 14px; border: none;outline: none;color: white;background: red;}
			.forget_ver_code_i{width: 190px;height: 30px;line-height: 30px; padding-top: 9px;padding-bottom: 9px; border-radius: 2px;border: 1px solid #E6E6E6; padding-left: 10px;outline: none;}
			#forget_get_code{width: 120px; height: 50px;right: 0px; border: 1px solid #E6E6E6;border-radius: 2px; outline: none; position: absolute;background: #F5F5F5;}
			.forget_ver_hint{width: 120px;height: 40px;display: none; left: -60px; top: 5px; text-align: center; position: absolute;z-index: -1; background: url(img/right_frame.png);}
			.triangle_right{width: 0px;height: 0px;top: 10px;right: -9px; border-width:9px 0px 9px 9px;border-style: dashed;border-color:transparent transparent transparent #E6E6E6;position: absolute;}
			.triangle_right_span{width: 0px;height: 0px;border-width:8px 0px 8px 8px;left: -9px;top: -8px;display: inline-block; position: absolute; border-style: dashed;border-color:transparent transparent transparent #FFF4D7;}
			.forget_ver_hint span{font-size: 12px;line-height: 40px;display: inline-block; text-align: center;color: #333333;}
			.set_password{width: 330px;height: 175px;margin-top: 60px; display: inline-block;position: relative;}
			.set_password>div>input,.set_password>div>div>input{width: 320px;height: 30px;line-height: 30px; padding-top: 9px;padding-bottom: 9px; border: 1px solid #E6E6E6; border-radius: 2px;padding-left: 10px;font-size: 14px;margin-bottom: 25px; outline: none;}
			.set_password>div{position: relative;}
			.set_password>button{width: 100%;height: 50px;border-radius: 2px;font-size: 14px; border: none;outline: none;color: white; background: red;}
			.set_password_hook{width: 15px;height: 15px;top: 17px;right: -22px; position: absolute;}
			.set_password_hook_icon{vertical-align: top;}
			.set_password_hint{top: 50px; position: absolute;}
			.set_password_hint em{font-size: 12px;color: #999999;}
			.hint em,.err em{font-size: 12px;vertical-align: middle; color: #999999;}
			.err_icon{color: #FF0000;}
			.hint_icon{color: #CCCCCC;}
			.forget_confirm_new_pas_hidden{display: block; background: #F5F5F5;}
			.set_password_success>div>span{font-size: 12px;display: block;float: left;color: #333333;}
			.set_password_success_icon{font-size: 16px;margin-left: 5px;padding-bottom: 5px; margin-right: 5px; float: left;}
			.set_password_success{width: 140px;height: 110px;margin-top: 60px; display: inline-block;}
			 .set_password_success>a{width: 100%;height: 45px;margin-top: 20px;border-radius: 2px;line-height: 50px;font-size: 14px; display: inline-block; text-decoration: none; border: none; outline: none; color: white; background: red;}  
		</style>
	</head>
	<body>
		<div class="forget">
			<ul class="forget_nav">
				<li>
					<span class="icon iconfont forget_nav_one active">1</span>
					<strong>填写用户名</strong>
				</li>
				<!--<hr size="1" />-->
				<li>
					<span class="icon iconfont forget_nav_two">2</span>
					<strong>身份验证</strong>
				</li>
				<!--<hr size="1" />-->
				<li>
					<span class="icon iconfont forget_nav_three">3</span>
					<strong>设置新密码</strong>
				</li>
				<!--<hr size="1" />-->
				<li>
					<span class="icon iconfont forget_nav_four">4</span>
					<strong>完成</strong>
				</li>
			</ul>
			<ul class="forget_content">
				<!--填写用户名-->
				<li class="forget_content_name">
					<div class="one">
						<span>用户名</span>
						<input name="user_name" placeholder="输入用户名" maxlength="20" type="text" οnkeyup="forgetChange()"/>
						<div class="forget_hint">
						<span id="forget_text"></span>
						</div>
					</div><br />
					<div class="two">
					<button id="forget_next" type="button">下一步</button>
					</div>
				</li>
				<!--验证身份-->
				<li>
					<div class="forget_ver">
						<span id="ver_hint_text" class="ver_hint_text">请点击获取验证码并在手机：130****5436中查看短信，并写写验证码</span>
						<div class="forget_ver_code">
							<input class="forget_ver_code_i" maxlength="6" οnkeyup="forgetVerIn()" placeholder="输入验证码" />
							<button id="forget_get_code" type="button">获取验证码</button>
							<div class="forget_ver_hint">
								<div class="triangle_right">
								<span class="triangle_right_span"></span>
								</div>
								<span>验证码错误</span>
							</div>
						</div>
						<button id="forget_ver_code_next">下一步</button>
					</div>
				</li>
				<li>
					<div class="set_password">
						<div>
							<input id="forget_new_pas" type="password" maxlength="20" placeholder="输入新密码" />
							<div id="set_password_hook" class="set_password_hook">
							</div>
							<div id="set_password_hint" class="set_password_hint"></div>
						</div>
						<div>
							<div id="forget_confirm_new_pas_false_box" style="display: block;">
							<input class="forget_confirm_new_pas forget_confirm_new_pas_hidden" type="password" maxlength="20" placeholder="请再次输入密码（锁定状态）" disabled="disabled"/>
							</div>
							<div id="forget_confirm_new_pas_true_box" style="display: none;">
								<input id="forget_confirm_new_pas"  class="forget_confirm_new_pas forget_confirm_new_pas_show" type="password" maxlength="20" placeholder="请再次输入密码"/>
							</div>
							<div id="set_c_password_hook" class="set_password_hook">
							</div>
							<div id="set_c_password_hint" class="set_password_hint"></div>
						</div>
						<button id="forget_new_pas_btn">下一步</button>
					</div>
				</li>
				<li>
					<div class="set_password_success">
					<i class="icon iconfont set_password_success_icon"></i>
					<div>
					<span>新密码设置成功！</span>
					<span>请您牢记新密码</span>
					</div>
					<a href="#">返回首页</a>
					</div>
				</li>
			</ul>
		</div>
		<script type="text/javascript" src="http://libs.baidu.com/jquery/1.6.4/jquery.min.js" ></script>
		<script type="text/javascript" src="js/public.js"></script>
		<script type="text/javascript">
			var phone_number;
			var forgetNavLiSet = $('.forget_nav').children('li');
			var forConLiSet = $('.forget_content').children('li');
			forConLiSet.css('display','none');
			forConLiSet.eq(0).css('display','block');
			forgetNavLiSet.eq(0).children('span').addClass('active');
			forgetNavLiSet.eq(0).children('strong').css('color','orangered');
			$('#forget_next').click(function(){
					url:"http://120.77.241.166/demo/one.php",
					my_request('post','http://120.77.241.166/demo/one.php',function(data){
						//用户名不存在返回0
						if(data['status'] == 1){
							$('#forget_text').html('用户不存在');
							$('.forget_hint').css('display','block');
							$('.forget_hint').animate({right:'-135px'},200);	
							//OK返回1
						}else if(data['status'] == 0){	
						phone_number = data['phone_number'];
							forConLiSet.not(forConLiSet.eq(1)).css('display','none');
							forConLiSet.eq(1).css('display','block');
							forgetNavLiSet.eq(0).children('span').removeClass('active').addClass('ok').html('');
							forgetNavLiSet.eq(0).children('strong').css('color','#FF8C60');
							forgetNavLiSet.eq(1).children('span').addClass('active');
							forgetNavLiSet.eq(1).children('strong').css('color','orangered');
						//用户名和密码不匹配返回1	
						}else if(data['status'] == 2){
							$('#forget_text').html('用户或密码不匹配');	
							$('.forget_hint').css('display','block');
							$('.forget_hint').animate({right:'-135px'},200);
						}
					});
			});
			function forgetChange(){
				$('.forget_hint').css('display','none');
			}
			//获取了验证码下一步
			$('#forget_ver_code_next').click(function(){
				//验证码错误
				if(false){
				$('.forget_ver_hint').css('display','block');
				$('.forget_ver_hint').animate({left:'-135px'},200);	
				//ok
				}else if(true){
							forConLiSet.not(forConLiSet.eq(2)).css('display','none');
							forConLiSet.eq(2).css('display','block');
							forgetNavLiSet.eq(0).children('span').removeClass('active').addClass('ok').html('');
							forgetNavLiSet.eq(0).children('strong').css('color','#FF8C60');
							forgetNavLiSet.eq(1).children('span').removeClass('active').addClass('ok').html('');
							forgetNavLiSet.eq(1).children('strong').css('color','#FF8C60');
							forgetNavLiSet.eq(2).children('span').addClass('active');
							forgetNavLiSet.eq(2).children('strong').css('color','orangered');
				}
			});
			//隐藏提示
			function forgetVerIn(){
			$('#forget_confirm_new_pas_false_box').css('display','block');
			$('#forget_confirm_new_pas_true_box').css('display','none');
			valueFilter($('.forget_ver_code_i').val());
			}
			//验证码只能输入数字	
			function valueFilter(value){
			value = parseInt(value);
			if(value>0){
				$('.forget_ver_code_i').val(value);
			}else{
				$('.forget_ver_code_i').val('');
			}
		}
			//set new password
	$('#forget_new_pas').focus(function(){
$('#set_password_hint').html('<i class="icon iconfont hint_icon"></i> <em>建议使用字母、数字和符号两种及以上的组合，6-20个字符</em>');
}).blur(function(){
	if(this.value.length == 0){
		initHint($('#forget_new_pas'),$('#set_password_hook'),$('#set_password_hint'));
		setConfirm();
		return;
	}
	var m = findStr(this.value, this.value.substring(0,1));
	if(this.value.length == m){
		$('#set_password_hint').html('<i class="icon iconfont err_icon"></i> <em>密码过于简单</em>');
		setConfirm();
		$('#set_password_hook').html('');
		return;
	}
	if(this.value.length==0){
		$('#set_password_hint').html('');
		$('#set_password_hook').html('');
		setConfirm();
		return;
	}
	if(this.value.length < 6 || this.value.length > 16){
      $('#set_password_hint').html('<i class="icon iconfont err_icon"></i> <em>长度只能在6-20个字符之间</em>');
   		setConfirm();
		$('#set_password_hook').html('');
   		return;
	}
	if(!/[^\d]/g.test(this.value)){
      $('#set_password_hint').html('<i class="icon iconfont err_icon"></i> <em>密码不能全为数字</em>');
    	setConfirm();
		$('#set_password_hook').html('');
    	return;
	}
	if(!/[^a-zA-Z]/g.test(this.value)){
       $('#set_password_hint').html('<i class="icon iconfont err_icon"></i> <em>密码不能全为字母</em>');
    	setConfirm();
		$('#set_password_hook').html('');
    	return;
	}
	$('#forget_confirm_new_pas_false_box').css('display','none');
	$('#forget_confirm_new_pas_true_box').css('display','block');
	$('#set_password_hook').html('<i class="icon iconfont hook"></i>');
	$('#set_password_hint').html('');
});
$('#forget_new_pas').keyup(function(){
	$('#set_c_password_hint').html('');
	$('#set_c_password_hook').html('');
	$('#forget_confirm_new_pas').val('');
	setConfirm();
	initHint($('#forget_new_pas'),$('#set_password_hook'),$('#set_password_hint'));
});
//确认密码
	$('#forget_confirm_new_pas').focus(function(){
		$('#set_c_password_hint').html('<i class="icon iconfont hint_icon"></i> <em>请再次输入密码</em>');
	}).blur(function(){
		if(this.value.length == 0){
			$('#set_c_password_hint').html('');
			$('#set_c_password_hook').html('');
			return;
		}
		if(!(this.value == $('#forget_new_pas').val())){
			$('#set_c_password_hint').html('<i class="icon iconfont err_icon"></i> <em>密码输入不一致</em>');
			$('#set_c_password_hook').html('');
		}else{
			$('#set_c_password_hint').html('');
			$('#set_c_password_hook').html('<i class="icon iconfont hook"></i>');
		}
	});
	$('#forget_confirm_new_pas').keyup(function(){
		$('#set_c_password_hint').html('');
		initHint($('#forget_confirm_new_pas'),$('#set_c_password_hook'),$('#set_password_hint'));
		if(this.value == $('#password').val()){
		$('#set_c_password_hook').html('<i class="icon iconfont hook"></i>');
		}
	});

function findStr(str, n){
  var tmp = 0;
  for (var i = 0; i < str.length; i++){
    if(str.charAt(i)==n){
      tmp++;
    }
  }
  return tmp;
}
function setConfirm(){
	$('#forget_confirm_new_pas_false_box').css('display','block');
	$('#forget_confirm_new_pas_true_box').css('display','none');
}
function initHint(main,kook,hint){
	if(main.val().length==0){
	kook.html('');
	hint.html('');
	}
}
//新密码按钮
$('#forget_new_pas_btn').click(function(){
my_request('post','http://120.77.241.166/demo/one.php',function(data){
if(data['status'] == 0){
							forConLiSet.not(forConLiSet.eq(3)).css('display','none');
							forConLiSet.eq(3).css('display','block');
							forgetNavLiSet.eq(0).children('span').removeClass('active').addClass('ok').html('');
							forgetNavLiSet.eq(0).children('strong').css('color','#FF8C60');
							forgetNavLiSet.eq(1).children('span').removeClass('active').addClass('ok').html('');
							forgetNavLiSet.eq(1).children('strong').css('color','#FF8C60');
							forgetNavLiSet.eq(2).children('span').removeClass('active').addClass('ok').html('');
							forgetNavLiSet.eq(2).children('strong').css('color','#FF8C60');
							forgetNavLiSet.eq(3).children('span').addClass('active');
							forgetNavLiSet.eq(3).children('strong').css('color','orangered');
			}
});
});
		</script>
	</body>
</html>

js代码：

	function my_request(method,re_url,callback)
 {
 var xmlHttp;
 try
    {
   // Firefox, Opera 8.0+, Safari
    xmlHttp=new XMLHttpRequest();
    }
 catch (e)
    {
  // Internet Explorer
   try
      {
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
      }
   catch (e)
      {
      try
         {
         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
         }
      catch (e)
         {
         alert("您的浏览器不支持AJAX！");
         return false;
         }
      }
    }
    xmlHttp.onreadystatechange = function(){
    if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
			try{	
			callback(JSON.parse(xmlHttp.responseText));
			}
			catch(e){
				alert('解析json数据错误');
			}
		}	
    }
    xmlHttp.open(method,re_url,true);
	xmlHttp.send();
 }
 function init(){
  var placeholderfriend = {
     focus: function(s) {
       s = $(s).hide().prev().show().focus();
       var idValue = s.attr("id");
       if (idValue) {
         s.attr("id", idValue.replace("placeholderfriend", ""));
       }
       var clsValue = s.attr("class");
    if (clsValue) {
         s.attr("class", clsValue.replace("placeholderfriend", ""));
       }
     }
   }

  //判断是否支持placeholder
   function isPlaceholer() {
     var input = document.createElement('input');
     return "placeholder" in input;
   }
   //不支持的代码
  if (!isPlaceholer()) {
     $(function() {

      var form = $(this);

      //遍历所有文本框，添加placeholder模拟事件
      var elements = form.find("input[type='text'][placeholder]");
       elements.each(function() {
         var s = $(this);
         s.addClass('com_gray');
         var pValue = s.attr("placeholder");
   var sValue = s.val();
         if (pValue) {
           if (sValue == '') {
             s.val(pValue);
           }
         }
       });

      elements.focus(function() {
         var s = $(this);
         var pValue = s.attr("placeholder");
         	s.removeClass('com_gray');
   var sValue = s.val();
         if (sValue && pValue) {
           if (sValue == pValue) {
             s.val('');
           }
         }
       });

      elements.blur(function() {
         var s = $(this);
         var pValue = s.attr("placeholder");
          if(s.val().length == 0){
         	s.addClass('com_gray');
         }
   var sValue = s.val();
         if (!sValue) {
           s.val(pValue);
         }
       });

      //遍历所有密码框，添加placeholder模拟事件
      var elementsPass = form.find("input[type='password'][placeholder]");
       elementsPass.each(function(i) {
         var s = $(this);
         var pValue = s.attr("placeholder");
         s.addClass('com_gray');
   var sValue = s.val();
         if (pValue) {
           if (sValue == '') {
             //DOM不支持type的修改，需要复制密码框属性，生成新的DOM
             var html = this.outerHTML || "";
             html = html.replace(/\s*type=(['"])?password\1/gi, " type=text placeholderfriend")
               .replace(/\s*(?:value|on[a-z]+|name)(=(['"])?\S*\1)?/gi, " ")
               .replace(/\s*placeholderfriend/, " placeholderfriend value='" + pValue
               + "' " + "οnfοcus='placeholderfriendfocus(this);' ");
             var idValue = s.attr("id");
             if (idValue) {
               s.attr("id", idValue + "placeholderfriend");
             }
             var clsValue = s.attr("class");
    if (clsValue) {
               s.attr("class", clsValue + "placeholderfriend");
             }
             s.hide();
             s.after(html);
           }
         }
       });

      elementsPass.focus(function(){
      	$(this).removeClass('com_gray');
      }).blur(function() {
         var s = $(this);
         var sValue = s.val(); 
         if(sValue.length == 0){
         	s.addClass('com_gray');
         }
         if (sValue == '') {
           var idValue = s.attr("id");
           if (idValue) {
             s.attr("id", idValue + "placeholderfriend");
           }
           var clsValue = s.attr("class");
     if (clsValue) {
             s.attr("class", clsValue + "placeholderfriend");
           }
           s.hide().next().show();
         }
       });

    });
   }
   window.placeholderfriendfocus = placeholderfriend.focus;
 }
   init();

Revival_Liang

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
web忘记密码

@font-face {font-family: "iconfont"; src: url('fonts/iconfont.eot'); /* IE9*/ src: url('fonts/iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('fonts/i
复制链接

扫一扫