1. <div id="dv">
    2.     <label for="pwd">密码</label>
    3.     <input type="text" id="pwd" maxlength="16"><!--课外话题-->
    4.     <div>
    5.         <em>密码强度：</em>
    6.         <em id="strength"></em>
    7.         <div id="strengthLevel" class="strengthLv0"></div>
    8.     </div>
    9. </div>
    10. <script src="common.js"></script>
    12. <style type="text/css">
    13.     #dv{
    14.         width: 300px;
    15.         height:200px;
    16.         position: absolute;
    17.         left:300px;
    18.         top:100px;
    19.     }
    20.     .strengthLv0 {
    21.         height: 6px;
    22.         width: 120px;
    23.         border: 1px solid #ccc;
    24.         padding: 2px;
    25.     }
    27.     .strengthLv1 {
    28.         background: red;
    29.         height: 6px;
    30.         width: 40px;
    31.         border: 1px solid #ccc;
    32.         padding: 2px;
    33.     }
    35.     .strengthLv2 {
    36.         background: orange;
    37.         height: 6px;
    38.         width: 80px;
    39.         border: 1px solid #ccc;
    40.         padding: 2px;
    41.     }
    43.     .strengthLv3 {
    44.         background: green;
    45.         height: 6px;
    46.         width: 120px;
    47.         border: 1px solid #ccc;
    48.         padding: 2px;
    49.     }
    51.     .strengthLv4 {
    52.         background: black;
    53.         height: 6px;
    54.         width: 150px;
    55.         border: 1px solid #ccc;
    56.         padding: 2px;
    57.     }
    58. </style>
    61. my$("pwd").onkeyup = function(){
    62.     var value = this.value;
    63.     var level = 0;
    64.     //1.如果输入的内容中函数字  强度是0
    65.     if(/\d+/.test(value)){
    66.         level++;
    67.     }
    68.     //2.如果输入的内容含小写字母  强度是1
    69.     if(/[a-z]+/.test(value)){
    70.         level++;
    71.     }
    72.     //3.如果输入的内容含大写字母  强度是2
    73.     if(/[A-Z]+/.test(value)){
    74.         level++;
    75.     }
    76.     //4.如果输入的内容含非字符  强度是3
    77.     if(/\W+/.test(value)){
    78.         level++;
    79.     }
    80.     my$("strengthLevel").className = "strengthLv"+level;
    81. }

    test.gif