最近小组做项目自己被分到做修改密码页面,参考了qq修改密码页面,发现验证功能很全。js新手入门,学着写了一个。代码如下。
功能:
1、新密码强度验证;
2、旧密码不为空;
3、新密码长度为8-16位,必须包含数字/字母/字符中的两种组合、不包含空格、不能含有非法字符、不能是近期使用过的密码;
4、再次输入密码不为空,判断两次输入是否一致;
5、以上四种功能都使用的onkeyup事件,只要输入框中的内容发生改变就激发函数。
- js
//旧密码
function myFunctionforPast(){
var n=document.getElementById("pwdpast").value;
if(n==""){
document.getElementById("pwdpast-text").innerHTML="不能为空";
document.getElementById("pwdpast-text").className="pwdclass";
}
else{
document.getElementById("pwdpast-text").innerHTML="";
document.getElementById("pwdpast-text").className="";
}
}
//再次输入密码
function myFunctionforTwice(){
var m=document.getElementById("pwd2").value;
var x=document.getElementById("pwd1").value;
if(m==""){
document.getElementById("twicepwd").innerHTML="不能为空";
document.getElementById("twicepwd").className="pwdclass";
}
else{
document.getElementById("twicepwd").innerHTML=""
document.getElementById("twicepwd").className="";
}
if(m!=x){
document.getElementById("twicepwd").innerHTML="两次密码输入不一致";
document.getElementById("twicepwd").className="pwdclass";
}
}
//新密码
var oInput = document.getElementById('pwd1');
oInput.value = '';
var spans = document.getElementsByTagName('span');
var spans1=[];
var j=0;
for(var i=0;i<spans.length;i++)
{
if(spans[i].className=="aaa"){
spans1[j]=spans[i];
j++;
}
}
function checkpw1() {
var x=document.getElementById("pwd1").value;
var p=document.getElementById("pwdpast").value;
spans1[0].className = spans1[1].className = spans1[2].className = "default";
//var pwd = oInput.value;//x
var result = 0;
for(var i = 0, len = x.length; i < len; ++i){
result |= charType(x.charCodeAt(i));
}
var level = 0;
//对result进行四次循环,计算其level
for(var i = 0; i <= 4; i++){
if(result & 1){
level ++;
}
//右移一位
result = result >>> 1;
}
if(x.length >= 3){
switch (level) {
case 1:
spans1[0].className = "weak";
break;
case 2:
spans1[0].className = "medium";
spans1[1].className = "medium";
break;
case 3:
case 4:
spans1[0].className = "strong";
spans1[1].className = "strong";
spans1[2].className = "strong";
break;
}
}
if(x== "") {
document.getElementById("newpwd").innerHTML="不能为空";
document.getElementById("newpwd").className="pwdclass";
return false;
}
if(x!= "") {
if(x.length < 8 ||x.length>16) {
document.getElementById("newpwd").innerHTML="长度为8~16个字符";
document.getElementById("newpwd").className="pwdclass";
return false;
}
else{
document.getElementById("newpwd").innerHTML="";
document.getElementById("newpwd").className="";
}
if(x == p) {
document.getElementById("newpwd").innerHTML="不能是近期使用过的密码,请重新输入";
document.getElementById("newpwd").className="pwdclass2";
return false;
}
// ^\S
re = /((?=.*\d)(?=.*\D)|(?=.*[a-zA-Z])(?=.*[^a-zA-Z]))(?!^.*[\u4E00-\u9FA5].*$)^\S{8,16}$/;
if(!re.test(x)) {
document.getElementById("newpwd").innerHTML="密码必须包含数字/字母/字符两种组合,且不能含有空格";
document.getElementById("newpwd").className="pwdclass2";
return false;
}
re = /[@#\$%\^&\*]+/g;
if(re.test(x)) {
document.getElementById("newpwd").innerHTML="不能有非法字符"
document.getElementById("newpwd").className="pwdclass";
return false;
}
} else {
document.getElementById("newpwd").innerHTML="";
return false;
}
return true;
}
function charType(num){
if(num >= 48 && num <= 57){
return 1;
}
if (num >= 97 && num <= 122) {
return 2;
}
if (num >= 65 && num <= 90) {
return 4;
}
return 8;
}
- html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- Title -->
<title>修改密码</title>
<!-- Core Stylesheet -->
<link rel="stylesheet" href="css/修改密码界面.css">
</head>
<body>
<div id="passwd-change">
<ul>
<li>
<span class="span-left">
请输入原密码:
</span>
<input type="password" id="pwdpast" name="pwdpast" class="input" οnkeyup="myFunctionforPast()">
<span id="pwdpast-text">
</span>
</li>
<li>
<span class="span-left">
请输入新密码:
</span>
<input type="password" id="pwd1" name="pwd1" class="input"/οnkeyup="checkpw1()" value autocomplete="off">
<span id="newpwd"></span>
</li>
<li id="strength">
<span class="span-left">密码强度:</span>
<span class="aaa">弱</span>
<span class="aaa">中</span>
<span class="aaa">强</span>
</li>
<li>
<span class="span-left">
请再次输入新密码:
</span>
<input type="password" id="pwd2" name="pwd2"/ class="input"value autocomplete="off" οnkeyup="myFunctionforTwice()"/>
<span id="twicepwd">
</span>
</li>
<li>
<button type="button">提交修改</button>
</li>
</ul>
</div>
<!--本页的js-->
<script src="js/密码测试.js">
</script>
</body>
</html>
- css
/***********************修改密码页面************************************/
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
#passwd-change ul{
border: none;
margin-left:20px;
height: 630px;
width: 800px;
margin-left: 50px;
padding-top: 50px;
/* padding-left: 50px; */
/* background-color: #007BFF */
}
#passwd-change ul li{
border: none;
height: 50px;
width: 600px;
}
#passwd-change ul li button{
display: block;
margin-left: 110px;
border: none;
border-radius: 10px;
height: 30px;
width: 100px;
background-color:#81c234 ;
color: #FFFFFF;
outline: none;
}
#passwd-change ul li span{
/* width: 160px; */
height: 30px;
/* font-size: 16px; */
/* font-weight: bold; */
/* line-height: 30px; */
/* background: red; */
display: block;
float: left;
/* padding-left: 15px; */
}
#passwd-change ul li .span-left{
width: 160px;
font-size: 16px;
line-height: 30px;
}
#passwd-change ul li input{
width: 220px;
height: 30px;
font-size: 16px;
/* border-radius: 10px; */
/* font-weight: bold; */
/* background: yellow; */
margin-left: 2px;
display: block;
float: left;
}
#passwdchange{
background-color: #81c234;
color: #FFFFFF;
}
/* #strength */.default {
background: #eeeeee;
line-height: 30px;
display: inline-block;
width: 70px;
height: 30px;
line-height: 30px;
font-size: 16px;
text-align: center;
margin: 4px 2px;
}
#strength .weak {
background: #FF0000;
display: inline-block;
font-size: 16px;
width: 70px;
line-height: 30px;
height: 30px;
line-height: 30px;
text-align: center;
margin: 4px 2px;
}
#strength .medium {
background: #FF9900;
display: inline-block;
font-size: 16px;
width: 70px;
line-height: 30px;
height: 30px;
line-height: 30px;
text-align: center;
margin: 4px 2px;
}
#strength .strong {
background: #81c234;
display: inline-block;
width: 70px;
height: 30px;
line-height: 30px;
text-align: center;
font-size: 16px;
line-height: 30px;
margin: 4px 2px;
}
#strength .aaa{
display: inline-block;
width: 70px;
height: 30px;
line-height: 30px;
font-size: 16px;
background: #ddd;
line-height: 30px;
text-align: center;
margin: 4px 2px;}
.pwdclass{
width: 200px;
height: 30px;
font-size: 14px;
line-height: 30px;
border: 1px solid rgba(129,194,52,0.9);
background-color: rgba(129,194,52,0.3);
color:rgb(129,194,52) ;
text-align: center;
padding-left: 0;
margin-left: 10px;
}
.pwdclass2{
width: 200px;
height: 30px;
font-size: 12px;
line-height: 15px;
border: 1px solid rgba(129,194,52,0.9);
background-color: rgba(129,194,52,0.3);
color:rgb(129,194,52) ;
text-align: center;
padding-left: 0;
margin-left: 10px;
}
预览效果