<!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();
