master

分支 (1)

管理

管理

master

BZC_WG
/
forgetpass.html


<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <link rel="stylesheet" href="css/retrivePassword.css" />
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/bs4.pop.css">
        <script type="text/javascript" src="js/jquery.min.js" ></script>
        <script type="text/javascript" src="js/bootstrap.min.js" ></script>
        <script type="text/javascript" src="js/bs4.pop.js" ></script>
        <script type="text/javascript" src="js/alert.js" ></script>
    </head>
    <style>
    .content_bottom .question{
        width: 100%;
    }
    .passlabel{
        width: 100px;
        display: inline-block;
        text-align: right;
    }
    .userisnull,.passcheck{
        color: red;
        display: none;
    }
    #usernameConfirm{
        width: 200px;
    }
    .findinput{
        margin: 8px 0px;
    }
    </style>
    <body>
    	<div class="top">
    		<p>安全中心</p>
    		<p class="tip">|找回密码</p>
    	</div>
    	<div class="content_bottom">
    		<center>
    		<div class="inputUsername">
    			<table>
    				<tr>
    					<td>
                           <span class="passlabel" >  账号：</span>
                           <input type="text" placeholder="请输入账号" class="username findinput" onblur="checkUser()"/>
                           <span class="userisnull"> 账号不能为空</span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span class="passlabel"> 手机号：</span>
                            <input type="text" placeholder="请输入手机号" class="phone  findinput" />
                            <button onclick="sendMessage()" type="button" class="btn btn-default sendcodes">发送验证码</button>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span class="passlabel"> 验证码：</span>
                            <input type="text" placeholder="请输入验证码" class="confirmcode findinput" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span class="passlabel"> 输入新密码：</span>
                            <input type="password" placeholder="请输入新密码" class="pass findinput" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span class="passlabel"> 确认密码：</span>
                            <input type="password" placeholder="确认密码" class="repass findinput" />
                            <span class="passcheck">两次密码输入不一致，请重新输入</span>
                        </td>
                    </tr>
    			</table>
    			<button id="usernameConfirm">确认</button>
    		</div>
    		</center>
        </div>
		<script>
            var baseUrl = "http://172.16.27.199:8080";
            //判断账号是否合法
            var userisright = true;
            //计时器
            var count = 60; //间隔函数，1秒执行
            var timer; //timer变量，控制时间
            var curCount;//当前剩余秒数
            //确认找回密码
            $("#usernameConfirm").click(function(){
                let phonecode = localStorage.getItem('code');
                if($(".confirmcode").val() == phonecode  && userisright &&  $(".pass").val()==$(".repass").val()){
                    bs4pop.notice('修改成功！', {type: 'success'});
                }else{
                    if($(".confirmcode").val() == "" || $(".username").val() == "" || $(".pass").val() == ""|| $(".repass").val() == ""|| $(".phone").val() == ""){
                        bs4pop.notice('必要信息填写不正确，请检查后重新提交！', {type: 'danger'});
                    }else{
                        if($(".confirmcode").val() != phonecode){
                            bs4pop.notice('验证码错误！', {type: 'danger'});
                        }else if(!userisright){
                            bs4pop.notice('用户不存在或为空！', {type: 'danger'});
                        }else if($(".pass").val()!=$(".repass").val()){
                            bs4pop.notice('两次输入的密码不一致！', {type: 'danger'});
                        }else{
                            bs4pop.notice('必要信息填写不正确，请检查后重新提交！', {type: 'danger'});
                        }
                    }
                }
            })
            //正则校验手机号
            function validatorTel(content){
                // 正则验证格式
                eval("var reg = /^1[34578]\\d{9}$/;");
                return RegExp(reg).test(content);
            }
            function sendMessage(){
                let messageVal =$(".phone").val();
                if(validatorTel(messageVal)){
                    $.ajax({
                        type:'get',
                        dataType:'jsonp',
                        jsonp:'callback',
                        crossDomain: true,
						url:baseUrl+'/forgetpassword/'+messageVal,
						success:function(res){
                            if(res.code == 200){
                                bs4pop.notice('验证码发送成功！', {type: 'success'});
                                localStorage.setItem('code',res.body);
                                curCount = count;
                                timer = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次
                                $(".sendcodes").attr("disabled", "true");
                            }
						}
					})

                }else{
                    bs4pop.notice('手机格式不正确，请确认后输入！', {type: 'danger'});
                }
            }
            //校验用户
            function checkUser(){
                let username = $(".username").val();
				if(username!=""){
					$.ajax({
                        type:'get',
                        dataType:'jsonp',
                        jsonp:'callback',
                        crossDomain: true,
						url:baseUrl+'/volitalusername/'+username,
						success:function(res){
                            if(res.code==0){
                                $(".userisnull").css('display','inline-block');
                                $(".userisnull").html('账号不存在');
                                userisright = false;
                            }else{
                                $(".userisnull").css('display','none');
                                userisright = true;
                            }
						}
					})
				}else{
                    $(".userisnull").css('display','inline-block');
                    $(".userisnull").html('账号不能为空！');
                    userisright = false;
				}
            }
			function SetRemainTime() {
                if (curCount == 1) {
                    window.clearInterval(timer);//停止计时器
                    $(".sendcodes").removeAttr("disabled");//启用按钮
                    $(".sendcodes").html("重新发送");
                }
                else {
                    curCount--;
                    $(".sendcodes").html(+curCount + "秒再获取");
                }
            }
			$("#answerConfirm").click(function(){
				$(".guide").css("background", "blue");
				$(".guide2").css("background", "blue");
				$(".question").hide();
				$(".success").show();
			});
		</script>
 	</body>

</html>