<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css" media="screen">
body {
background-color: #ccc;
}
.con {
margin: 100px auto;
width: 400px;
padding: 50px;
line-height: 40px;
border: 1px solid #999;
background: #efefef;
}
.strenLevel {
height: 6px;
width: 120px;
border: 1px solid #ccc;
padding: 2px;
}
.strenLevel1 {
background-color: red;
width: 40px;
}
.strenLevel2 {
background-color: yellow;
width: 70px;
}
.strenLevel3 {
background-color: green;
width: 100px;
}
</style>
<script src="jquery-1.11.1.min.js"></script>
</head>
<body>
<div class="con">
<label for="txt">密码</label>
<input id="txt" type="text" name="" value=""><br/>
<em>密码强度:</em>
<em class="strenLen" id="strenLen"></em>
<div class="strenLevel" id="strenLevel">
</div>
</div>
<script type="text/javascript">
$(function(){
var arr=["","低","中","高"];
var num=/[0-9]/;
$("#txt").keyup(function(){
var level=0;
/*console.log($("#txt").val());*/
var txt=num.test($('#txt').val());
var tx=/[a-zA-Z]/.test($('#txt').val());
var txs=/\W/.test($('#txt').val());
if(txt){
level++;
}
if(tx){
level++;
}
if(txs){
level++;
}
if($('#txt').val().length<6){
level=0;
}
$("em:eq(1)").html(arr[level]);
$(arr).each(
function(index) {
console.log(index);
$("div:eq(1)").removeClass("strenLevel"+index);
}
);
$("div:eq(1)").addClass("strenLevel"+level);
});
});
</script>
</body>
</html>
转载请注明原文地址: https://ju.6miu.com/read-666768.html
