今天照着网上的《四级密码强度校验》视频写了一个相同的代码，主要作用就是在输入密码后js执行了一个方法，最终返回输入密码的强度等级。代码是这样的：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style type="text/css">
#tips{
float:left;
margin:2px 0px 0px 20px;
color:#fff;
overflow:hidden;
background:#ccc;
}
span{
float:left;
width:50px;
height:20px;
text-align:center;
line-height:20px;
margin-right:2px;
}
#tips .s1{
background:red;
}
#tips .s2{
background:green;
}
#tips .s3{
background:yellow;
}
#tips .s4{
background:silver;
}
</style>
<script type="text/javascript">
var password=document.getElementById("pwd");
password.onkeyup = function(){
//var index = checkPassWord(this.value);
alert(2);
}
function checkPassWord(value){
var modes=0;
if(value.length<6){
return modes;
}
if(/\d/.test(value)){
//如果密码包含了数字
modes++;
}
if(/[a-z]/.test(value)){
//如果密码包含了小写的英文字母a-z
modes++;
}
if(/[A-Z]/.test(value)){
//如果包含了大写的英文字母A-Z
modes++;
}
if(/\W/.test(value)){
//如果非数字，字母，下划线
modes++;
}
return modes;
}
</script>
</head>
<body>
<input type="text" id="pwd" maxlength="16" value=""/>
<div id="tips">
<span class="s1">弱</span>
<span class="s2">中</span>
<span class="s3">强</span>
<span class="s4">很强</span>
</div>
</body>
</html>结果我把代码也剪切倒了body元素后面，神奇的事情发生了，能成功执行 alert（）方法了。。。
我思考了下，可能是因为整个html文件加载的顺序是从上到下的，在加载到script文件时还没有password这个元素，所以他的oneyup函数自然也执行不了。但是我在var password=document.....这行代码下面加了alert(1);，发现可以正常打印，那为什么到password.onkeyup这里的代码缺执行不了呢。。
在script代码块位于input前的情况下，我加了一行window.οnlοad=function(){}，然后把原来前五行的代码剪切到function的方法体里，那么onkeyup函数能够正常执行。
暂时写到这里，这里遇到的问题先记录一下，最后附上这个校验密码强度的完整代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> 密码强度检测 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
input{float: left; font-size: 14px; width: 250px; height: 25px; border: 1px solid #ccc; padding-left: 10px;}
#tips{float: left; font-size: 12px; width: 400px; height: 25px; margin: 4px 0 0 20px;}
#tips span{float: left; width: 40px; height: 20px; color: #fff; overflow:hidden; margin-right: 10px; background: #D7D9DD; line-height:20px; text-align: center; }
#tips .s1{background: #F45A68;}/*红色*/
#tips .s2{background: #fc0;}/*橙色*/
#tips .s3{background: #cc0;}/*黄色*/
#tips .s4{background: #14B12F;}/*绿色*/
</style>
</head>
<body>
<input type="text" id="password" value="" maxlength="16" />
<div id="tips">
<span>弱</span>
<span>中</span>
<span>强</span>
<span>很强</span>
</div>
</body>
<script type="text/javascript">
var password = document.getElementById("password"); //获取文本框的对象
//var value = password.value; //获取用户在文本框里面填写的值
//获取所有的span标签 返回值是一个数组
var spanDoms = document.getElementsByTagName("span");
password.onkeyup = function(){
//获取用户输入的密码,然后判断其强度 返回0 或者 1 2 3 4
var index = checkPassWord(this.value);
for(var i = 0; i <spanDoms.length; i++){
spanDoms[i].className = "";//清空span标签所有的class样式
if(index){//0 代表false 其余代表true
spanDoms[index-1].className = "s" + index ;
}
}
}
//校验密码强度
function checkPassWord(value){
// 0： 表示第一个级别 1：表示第二个级别 2：表示第三个级别
// 3： 表示第四个级别 4：表示第五个级别
var modes = 0;
if(value.length < 6){//最初级别
return modes;
}
if(/\d/.test(value)){//如果用户输入的密码 包含了数字
modes++;
}
if(/[a-z]/.test(value)){//如果用户输入的密码 包含了小写的a到z
modes++;
}
if(/[A-Z]/.test(value)){//如果用户输入的密码 包含了大写的A到Z
modes++;
}
if(/\W/.test(value)){//如果是非数字 字母 下划线
modes++;
}
switch(modes){
case 1 :
return 1;
break;
case 2 :
return 2;
break;
case 3 :
return 3;
break;
case 4 :
return 4;
break;
}
}
</script>
</html>
125
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
