密码的显示隐藏
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#pass{
width: 250px;
height: 20px;
border: none;
outline: none;
border-bottom: 1px solid #999;
}
#span{
display: inline-block;
cursor: pointer;
width: 20px;
height: 20px;
background: url("images/close.png");
background-size: 20px;
margin-left: -25px;
}
</style>
</head>
<body>
<input type="password" id="pass">
<span id="span"></span>
<script>
var int=document.getElementById("pass");
var t=true;
var yan=document.getElementById("span");
yan.onclick=function(){
if(t){
int.type="text";
t=false;
yan.style.backgroundImage='url("images/open.png")';
}else{
int.type="password";
t=true;
yan.style.backgroundImage='url("images/close.png")';
}
}
</script>
</body>
</html>
判断密码的长度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span{
color: #666;
font-size: 14px;
}
</style>
</head>
<body>
<input type="password" id="int"><span id="span">请输入6-16的密码</span>
<script>
var int=document.getElementById("int");
var span=document.getElementById("span");
int.onblur=function(){
if(int.value.length < 6 || int.value.length > 16){
span.innerHTML="密码该是6-16位的";
span.style.cssText="color:red;";
}else{
span.innerHTML="密码正确";
span.style.cssText="color:green;";
}
}
</script>
</body>
</html>
Processed:
0.010, SQL:
8
