match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。
语法
stringObject.match(searchvalue)
stringObject.match(regexp)
参数 描述
searchvalue 必需。规定要检索的字符串值。
regexp 必需。规定要匹配的模式的 RegExp 对象。如果该参数不是 RegExp 对象，则需要首先把它传递给 RegExp 构造函数，将其转换为 RegExp 对象。
返回值
存放匹配结果的数组。该数组的内容依赖于 regexp 是否具有全局标志 g。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>密码强度检查</title>
<style type="text/css">
#table td{
width:40px;
height:19px;
background-color:#F3F3F3;
border:1px solid #D0D0D0;
color:#BBBBBB;
line-height:9px;
color: khaki;
}
</style>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript" src="tools.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#password").keyup(function () {
var value = this.value;
var level = checkPasswordLevel(value);
if(level==1){
$("#td1").css("backgroundColor","coral");
$("#td2").css("backgroundColor","");
$("#td3").css("backgroundColor","");
}else if(level==2){
$("#td1").css("backgroundColor","lightyellow");
$("#td2").css("backgroundColor","lightyellow");
$("#td3").css("backgroundColor","");
}else if(level==3){
$("#td1").css("backgroundColor","lightgreen");
$("#td2").css("backgroundColor","lightgreen");
$("#td3").css("backgroundColor","lightgreen");
}
});
});
</script>
</head>
<body>
<form>
<label for="password">密码：</label>
<input id="password" type="password" name="password" />
<table id="table" border="0" cellpadding="0" cellspacing="0" style="display: inline-table;">
<tr align="center">
<td id="td1">弱</td>
<td id="td2">中</td>
<td id="td3">强</td>
</tr>
</table>
</form>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>密码强度练习案例</title>
<style type="text/css">
#table td{
width:40px;
height:19px;
background-color:#F3F3F3;
border:1px solid #D0D0D0;
color:#BBBBBB;
line-height:9px;
}
</style>
</head>
<body>
<form>
<label for="password">密码：</label>
<input id="password" type="password" name="password" />
<table id="table" border="0" cellpadding="0" cellspacing="0" style="display: inline-table;">
<tr align="center">
<td id="td1">弱</td>
<td id="td2">中</td>
<td id="td3">强</td>
</tr>
</table>
</form>
</body>
</html>
<script type="text/javascript">
/*
密码强度规则:
弱:强度为1,密码长度小于6个就是弱
中:强度为2，除了弱和强之外都属于中
强:强度为3,密码长度大于或者等于8个,并且包含数字、小写字母和大写字母
*/
//什么时候检查密码的强度
//声明一个函数专门检查密码的强度
function checkPassword(value){
if(!value){
//null / undefined / 空字符串
return 1;
}
if(value.length<6){
return 1;
}
// /[0-9]/.test ( value )
if(value.length>=8 && value.match(/[0-9]/) && value.match(/[a-z]/) && value.match(/[A-Z]/) ){
return 3;
}
return 2;
}
//1 创建一个定时器，每个100毫秒检查一下密码的强度
setInterval(function(){
var passwordElement = document.getElementById("password");
var passwordLevel = checkPassword(passwordElement.value);
//2 如果检查结果是弱，就改变弱单元格的背景色...
switch (passwordLevel){
case 1:{
document.getElementById("td1").style.backgroundColor="#ff8040";
document.getElementById("td2").style.backgroundColor=null;
document.getElementById("td3").style.backgroundColor=null;
break;
}
case 2:{
document.getElementById("td1").style.backgroundColor="#ffff6f";
document.getElementById("td2").style.backgroundColor="#ffff6f";
document.getElementById("td3").style.backgroundColor=null;
break;
}
case 3:{
document.getElementById("td1").style.backgroundColor="#a8ff24";
document.getElementById("td2").style.backgroundColor="#a8ff24";
document.getElementById("td3").style.backgroundColor="#a8ff24";
break;
}
}
},100);
</script>
