效果
<style type="text/css">
span{
width:80px;
height: 10px;
display: inline-block;
background: grey;
margin-right: 3px;
font-size: 18px;
text-align: center;
}
</style>
</head>
<body>
<input type="text" id="txt" />
<div id="box" style="margin-top: 4px;">
<span id="r">弱</span>
<span id="z">中</span>
<span id="q">强</span>
</div>
</body>
</html>
<script src="public.js"></script>
<script type="text/javascript">
/*
1、一类字符 是 弱 纯数字 弱 纯字母 弱 纯 特殊字符 弱
2、两类字符 是 中
3、三类字符 强
*/
//包含数字 字母 特殊字符 三个正则
var num = /^\d+$/;//纯数字
var char_ = /^[a-z]+$/i;//纯字母
var other = /^[!@#$%^&*]+$/;//纯特殊字符
var _num = /\d+/;//包含数字
var _char = /[a-z]+/i;//包含字母
var _other = /[!@#$%^&*]+/ //包含特殊字符
$id("txt").onkeyup = function(){
var str = this.value;
if(str.length < 5){//内容的长度小于5，颜色不变
$id("r").style.background = "grey";
$id("z").style.background = "grey";
$id("q").style.background = "grey";
return
}
//排他思想
$id("r").style.background = "grey";
$id("z").style.background = "grey";
$id("q").style.background = "grey";
if(num.test(str) || char_.test(str) || other.test(str)){//纯数字或者纯字母或者纯其他字符都是弱
$id("r").style.background = "deeppink";
}else if(_num.test(str) && _char.test(str) && _other.test(str)){//三个都包含 强
$id("q").style.background = "deeppink";
}else{
$id("z").style.background = "deeppink";
}
}
</script>
