效果 <style type="text/css"> span{ width:80px; height: 10px; display: inline-block; background: grey; margin-right: 3px; font-size: 18px; text-align: ce ...
效果
<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>
