首页 > 代码库 > 验证密码和确认密码一致性
验证密码和确认密码一致性
需要jquery
密码需要6-16位
要求:不含有空格就行
机制:
1.第一次密码输入有不合规密码时,第二次密码提示字体变黄色警告,并永远是黄色。(边框和提示字体颜色一致,以下用提示字体代表)
2.第一次密码输入不到6位,第二次密码提示字体变黄色警告,并永远是黄色。
3.第一次密码输入正确(密码在6-16且没有空格),获得焦点时提示字体变蓝色表示聚焦该焦点。
4.第二次密码输入和第一次密码一致时,提示字体变绿色表示两次密码输入一致。
需要jquery
密码需要6-16位
要求:不含有空格就行
机制:
1.第一次密码输入有不合规密码时,第二次密码提示字体变黄色警告,并永远是黄色。(边框和提示字体颜色一致,以下用提示字体代表)
2.第一次密码输入不到6位,第二次密码提示字体变黄色警告,并永远是黄色。
3.第一次密码输入正确(密码在6-16且没有空格),获得焦点时提示字体变蓝色表示聚焦该焦点。
4.第二次密码输入和第一次密码一致时,提示字体变绿色表示两次密码输入一致。
?1. [代码][JavaScript]代码
$(document).ready(function()
{
var info_pwflag=1;
var info_apwflag=1;
<!--第一次密码验证-->
$("#pw").focus(function()
{
if($(this).val().length==0)
{
$(this).parent().css(‘border-color‘,‘#4DAFE4‘);
$(".box_2 .info").css("color","#4DAFE4").text("请输入6-16位密码,不含空格!");
}
if(info_pwflag==1)
{
$(this).parent().css(‘border-color‘,‘#4DAFE4‘);
$(".box_2 .info").css("color","#4DAFE4").text("请输入6-16位密码,不含空格!");
}
else
{
$(this).parent().css(‘border-color‘,‘red‘);
$(".box_2 .info").css("color","red").text("请输入6-16位密码,不含空格!");
}
});
$("#pw").blur(function()
{
var temp=$(this).val();
if(temp.length==0)
{
$(this).parent().css(‘border-color‘,‘red‘);
$(".box_2 .info").css("color","red").text("请输入密码!");
}
else
{
if(info_pwflag==1)
{
$(this).parent().css(‘border-color‘,‘#14BC3E‘);
$(".box_2 .info").css("color","#14BC3E").text("输入正确!");
}
}
if(temp.length<6)
{
if(info_pwflag==1)
{
$(this).parent().css(‘border-color‘,‘red‘);
$(".box_2 .info").css("color","red").text("请输入6-16位密码,不含空格!");
info_pwflag=0;
}
}
});
$("#pw").keyup(function(event)
{http://www.huiyi8.com/tupian/?
var info_user=$(this).val();
if(info_user.length==0)
{高清图片
info_pwflag=1;
}
else
{
for(i=info_user.length-1;i>=0;i--)
{
var temp=info_user.charAt(i);
if(temp==" ")
{
info_pwflag=0;
break;
}
else
{
info_pwflag=1;
}
}
}
if(info_pwflag==1)
{
$(this).parent().css(‘border-color‘,‘#4DAFE4‘);
$(".box_2 .info").css("color","#4DAFE4").text("请输入6-16位密码,不含空格!");
}
else
{
$(this).parent().css(‘border-color‘,‘red‘);
$(".box_2 .info").css("color","red").text("请输入6-16位密码,不含空格!");
}
});
<!--第二次密码验证-->
$("#apw").focus(function()
{
if($(this).val().length==0)
{
if(info_pwflag==1)
{
$(this).parent().css(‘border-color‘,‘#4DAFE4‘);
$(".box_3 .info").css("color","#4DAFE4").text("确认密码!");
}
else
{
$(this).parent().css(‘border-color‘,‘#CAC21F‘);
$(".box_3 .info").css("color","#CAC21F").text("第一次密码输入不正确!");
}
}
else
{
if(info_pwflag==1)
{
if(info_apwflag==1)
{
$(this).parent().css(‘border-color‘,‘#4DAFE4‘);
$(".box_3 .info").css("color","#4DAFE4").text("确认密码正确!");
}
else
{
$(this).parent().css(‘border-color‘,‘red‘);
$(".box_3 .info").css("color","red").text("确认密码不正确!");
}
}
else
{
$(this).parent().css(‘border-color‘,‘#CAC21F‘);
$(".box_3 .info").css("color","#CAC21F").text("第一次密码输入不正确!");
}
}
});
$("#apw").blur(function()
{
var temp=$(this).val();
if(temp.length==0)
{
$(this).parent().css(‘border-color‘,‘red‘);
$(".box_3 .info").css("color","red").text("请确认密码!");
}
else
{
if(info_pwflag==1)
{
if(info_apwflag==1)
{
$(this).parent().css(‘border-color‘,‘#14BC3E‘);
$(".box_3 .info").css("color","#14BC3E").text("确认密码正确!");
}
else
{
$(this).parent().css(‘border-color‘,‘red‘);
$(".box_3 .info").css("color","red").text("确认密码不正确!");
}
}
else
{
$(this).parent().css(‘border-color‘,‘#CAC21F‘);
$(".box_3 .info").css("color","#CAC21F").text("第一次密码输入不正确!");
}
}
});
$("#apw").keyup(function(event)
{
var info_user=$(this).val();
var info_pw=$("#pw").val();
if(info_pwflag==1)
{
if(info_user.length==0)
{
info_apwflag=1;
}
else
{
if(info_user==info_pw)
{
info_apwflag=1;
}
else
{
info_apwflag=0;
}
}
}
//alert(info_pw);
if(info_pwflag==1)
{
if(info_apwflag==1)
{
$(this).parent().css(‘border-color‘,‘#4DAFE4‘);
$(".box_3 .info").css("color","#4DAFE4").text("确认密码正确!");
}
else
{
$(this).parent().css(‘border-color‘,‘red‘);
$(".box_3 .info").css("color","red").text("确认密码不正确!");
}
}
else
{
$(this).parent().css(‘border-color‘,‘#CAC21F‘);
$(".box_3 .info").css("color","#CAC21F").text("第一次密码输入不正确!");
}
});
});
2. [代码]html代码
<div class="box box_2">
<label class="item">密码</label>
<div class="login_bg pw_bg">
<input id="pw" class="login_input pw" type="password" autocomplete="off" maxlength="16" tabindex="2">
</div>
<div class="info"></div>
</div>
<div class="box box_3">
<label class="item">确认密码</label>
<div class="login_bg apw_bg">
<input id="apw" class="login_input apw" type="password" autocomplete="off" maxlength="16" tabindex="3">
</div>
<div class="info"></div>
</div>
?