作者 shenhailong

用户登录 检测密码强弱提示 修改密码时 提示强弱信息

... ... @@ -21,7 +21,12 @@ String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.
</div>
<div class="login_box">
<input class="admin" type="text" placeholder="请输入账号" id="userName" maxlength="30" />
<input class="passWord" type="password" placeholder="请输入密码" id="password" maxlength="30" />
<input class="passWord" type="password" placeholder="请输入密码" id="password" onblur="regularValue()" maxlength="30" />
<%--<input type="text" name="valida" id="valida" οnkeydοwn="doEnter();">--%>
<%--<span><img src="<%=basePath %>verify/code" id="imgValida" οnclick="this.src='<%=basePath %>verify/code?a='+Math.random()" class="imgValida"></span>--%>
<input class="submit" type="button" onclick="doLogin()"/>
... ... @@ -109,5 +114,24 @@ String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.
doLogin();
}
}
function regularValue() {
var passwords = $("#newpassword").val();
var reg = /^(?![A-Za-z0-9]+$)(?![a-z0-9\W]+$)(?![A-Za-z\W]+$)(?![A-Z0-9\W]+$)[a-zA-Z0-9\W]{8,}$/;
var re = new RegExp(reg);
if (re.test(passwords)){
return true;
}else {
//不符合规则  
layer.tips('您的密码过于简单请及时修改', '#userName', {
tips: [1, '#0FA6D8'] //还可配置颜色
});
return false;
}
}
</script>
</html>
\ No newline at end of file
... ...
... ... @@ -156,7 +156,7 @@
</tr>
<tr>
<td class="kv-label"><spring:message code="user.newpwd"/></td>
<td class="kv-content"><input type="password" name="newpassword" id="newpassword" required maxlength="30"><span id="showStrength"></span>
<td class="kv-content"><input type="password" name="newpassword" id="newpassword" onblur="regularValue()" required maxlength="30"><span id="showStrength"></span>
</td>
</tr>
<tr>
... ... @@ -250,23 +250,64 @@
var newpassword = $("#newpassword").val();
var confirmnewpassword = $("#confirmnewpassword").val();
var id = $("#id").val();
$.get("<%=basePath %>system/user/verifyPassword",{id:id, originalpassword:originalpassword},function(data){
if(data.status==500){
layer.open({content:"<spring:message code="user.differpwd"/>"});
return;
}else if(data.status==200){
$.post("<%=basePath %>system/user/savepassword",{id:id, originalpassword:originalpassword,newpassword:newpassword,confirmnewpassword:confirmnewpassword},function(data){
if(data.status==200){
layer.confirm("<spring:message code="opt.savesuccess"/>",{btn:['<spring:message code="opt.confirm"/>','<spring:message code="opt.cancel"/>']},function(){
window.location.href="<%=basePath %>system/user/list";
})
}else{
layer.open({content:"<spring:message code="opt.savefailed"/>"});
}
})
}
})
var passwords = $("#newpassword").val();
var reg = /^(?![A-Za-z0-9]+$)(?![a-z0-9\W]+$)(?![A-Za-z\W]+$)(?![A-Z0-9\W]+$)[a-zA-Z0-9\W]{8,}$/;
var re = new RegExp(reg);
if (re.test(passwords)){
$.get("<%=basePath %>system/user/verifyPassword",{id:id, originalpassword:originalpassword},function(data){
if(data.status==500){
layer.open({content:"<spring:message code="user.differpwd"/>"});
return;
}else if(data.status==200){
$.post("<%=basePath %>system/user/savepassword",{id:id, originalpassword:originalpassword,newpassword:newpassword,confirmnewpassword:confirmnewpassword},function(data){
if(data.status==200){
layer.confirm("<spring:message code="opt.savesuccess"/>",{btn:['<spring:message code="opt.confirm"/>','<spring:message code="opt.cancel"/>']},function(){
window.location.href="<%=basePath %>system/user/list";
})
}else{
layer.open({content:"<spring:message code="opt.savefailed"/>"});
}
})
}
})
}else {
//不符合规则  
showStrength.innerHTML = "密码不少于8位,英文大小写、数字、特殊符号等相结合".fontcolor("red");
document.getElementById("newpassword").className = "icon into";
return false;
}
}
function regularValue() {
var passwords = $("#newpassword").val();
var reg = /^(?![A-Za-z0-9]+$)(?![a-z0-9\W]+$)(?![A-Za-z\W]+$)(?![A-Z0-9\W]+$)[a-zA-Z0-9\W]{8,}$/;
var re = new RegExp(reg);
if (re.test(passwords)){
//符合规则  
showStrength.innerHTML = "".fontcolor("green");
document.getElementById("newpassword").className = "icon ticker";
return true;
}else {
//不符合规则  
showStrength.innerHTML = "密码不少于8位,英文大小写、数字、特殊符号等相结合".fontcolor("red");
document.getElementById("newpassword").className = "icon into";
return false;
}
}
</script>
<script type="text/javascript">
... ... @@ -313,88 +354,7 @@
}
// 验证密码强度
$("#newpassword")window.onload = function () {
function setCss(_this,cssOption){
//判断节点类型
if (!_this || _this.nodeType ===3 || _this.nodeType === 8 ||!_this.style) {
return;
}
for(var cs in cssOption){
_this.style[cs] = cssOption[cs];
}
return _this;
}
function trim(chars){
return (chars ||"").replace(/^(\s|\u00a0)+|(\s|\u00a0)+$/g,"");
}
function passwordStrength(newpassword,showStrength){
var self = this;
/*字符权重;
数字1,字母2,其他字符为3
当密码长度小于6时不符合标准
长度>=6,强度小于10,强度弱
长度>=6,长度>=10且<15,强度中
长度>=6,强度>=15,强*/
passwordStrength.onkeyup = function(){
var _color = ["red","yellow","orange","green"],
msgs = ["密码太短","弱","中","强"],
_strength = 0,
_v= trim(newpassword.value),
_vL= _v.length,
i=0;
var charStrength = function(char){
//计算单个字符强度
if(char>=48 && char <=57){//数字
return 1;
}
if(char>=97 && char<=122){//小写
return 2;
}else{
return 3; //特殊字符
}
}
if(_vL<8){//计算模式
showStrength.innerText = msgs[0];
setCss(showStrength,{
"color":_color[0]
})
}else{
for(;i<_vL;i++){
//遍历字符
_strength+=charStrength(_v.toLocaleLowerCase().charCodeAt(i));
}
if(_strength<10){
//强度小于10
showStrength.innerText = msgs[1];
setCss(showStrength,{
"color":_color[1]
})
}
if(_strength>=10&&_strength<15){
showStrength.innerText = msgs[2];
setCss(showStrength,{
"color":_color[2]
})
}
if(_strength>=15){
showStrength.innerText = msgs[3];
setCss(showStrength,{
"color":_color[3]
})
}
}
}
}
passwordStrength(
document.getElementById("newpassword"),
document.getElementById("showStrength"));
};
</script>
</body>
... ...