需要jquery
密碼需要6-16位
要求：不含有空格就行
機制：
1.第一次密碼輸入有不合規密碼時，第二次密碼提示字體變黃色警告，並永遠是黃色。（邊框和提示字體顏色一致，以下用提示字體代表）
2.第一次密碼輸入不到6位，第二次密碼提示字體變黃色警告，並永遠是黃色。
3.第一次密碼輸入正確（密碼在6-16且沒有空格），獲得焦點時提示字體變藍色表示聚焦該焦點。
4.第二次密碼輸入和第一次密碼一致時，提示字體變綠色表示兩次密碼輸入一致。
1 $(document).ready(function() 2 { 3 var info_pwflag=1; 4 var info_apwflag=1; 5 <!--第一次密碼驗證--> 6 $("#pw").focus(function() 7 { 8 if($(this).val().length==0) 9 { 10 $(this).parent().css('border-color','#4DAFE4'); 11 $(".box_2 .info").css("color","#4DAFE4").text("請輸入6-16位密碼，不含空格！"); 12 } 13 if(info_pwflag==1) 14 { 15 $(this).parent().css('border-color','#4DAFE4'); 16 $(".box_2 .info").css("color","#4DAFE4").text("請輸入6-16位密碼，不含空格！"); 17 } 18 else 19 { 20 $(this).parent().css('border-color','red'); 21 $(".box_2 .info").css("color","red").text("請輸入6-16位密碼，不含空格！"); 22 } 23 }); 24 $("#pw").blur(function() 25 { 26 var temp=$(this).val(); 27 if(temp.length==0) 28 { 29 $(this).parent().css('border-color','red'); 30 $(".box_2 .info").css("color","red").text("請輸入密碼！"); 31 } 32 else 33 { 34 if(info_pwflag==1) 35 { 36 $(this).parent().css('border-color','#14BC3E'); 37 $(".box_2 .info").css("color","#14BC3E").text("輸入正確！"); 38 } 39 } 40 if(temp.length<6) 41 { 42 if(info_pwflag==1) 43 { 44 $(this).parent().css('border-color','red'); 45 $(".box_2 .info").css("color","red").text("請輸入6-16位密碼，不含空格！"); 46 info_pwflag=0; 47 } 48 } 49 }); 50 $("#pw").keyup(function(event) 51 { 52 var info_user=$(this).val(); 53 if(info_user.length==0) 54 { 55 info_pwflag=1; 56 } 57 else 58 { 59 for(i=info_user.length-1;i>=0;i--) 60 { 61 var temp=info_user.charAt(i); 62 if(temp==" ") 63 { 64 info_pwflag=0; 65 break; 66 } 67 else 68 { 69 info_pwflag=1; 70 } 71 } 72 } 73 if(info_pwflag==1) 74 { 75 $(this).parent().css('border-color','#4DAFE4'); 76 $(".box_2 .info").css("color","#4DAFE4").text("請輸入6-16位密碼，不含空格！"); 77 } 78 else 79 { 80 $(this).parent().css('border-color','red'); 81 $(".box_2 .info").css("color","red").text("請輸入6-16位密碼，不含空格！"); 82 } 83 }); 84 <!--第二次密碼驗證--> 85 $("#apw").focus(function() 86 { 87 if($(this).val().length==0) 88 { 89 if(info_pwflag==1) 90 { 91 $(this).parent().css('border-color','#4DAFE4'); 92 $(".box_3 .info").css("color","#4DAFE4").text("確認密碼！"); 93 } 94 else 95 { 96 $(this).parent().css('border-color','#CAC21F'); 97 $(".box_3 .info").css("color","#CAC21F").text("第一次密碼輸入不正確！"); 98 } 99 } 100 else 101 { 102 if(info_pwflag==1) 103 { 104 if(info_apwflag==1) 105 { 106 $(this).parent().css('border-color','#4DAFE4'); 107 $(".box_3 .info").css("color","#4DAFE4").text("確認密碼正確！"); 108 } 109 else 110 { 111 $(this).parent().css('border-color','red'); 112 $(".box_3 .info").css("color","red").text("確認密碼不正確！"); 113 } 114 } 115 else 116 { 117 $(this).parent().css('border-color','#CAC21F'); 118 $(".box_3 .info").css("color","#CAC21F").text("第一次密碼輸入不正確！"); 119 } 120 } 121 }); 122 $("#apw").blur(function() 123 { 124 var temp=$(this).val(); 125 if(temp.length==0) 126 { 127 $(this).parent().css('border-color','red'); 128 $(".box_3 .info").css("color","red").text("請確認密碼！"); 129 } 130 else 131 { 132 if(info_pwflag==1) 133 { 134 if(info_apwflag==1) 135 { 136 $(this).parent().css('border-color','#14BC3E'); 137 $(".box_3 .info").css("color","#14BC3E").text("確認密碼正確！"); 138 } 139 else 140 { 141 $(this).parent().css('border-color','red'); 142 $(".box_3 .info").css("color","red").text("確認密碼不正確！"); 143 } 144 } 145 else 146 { 147 $(this).parent().css('border-color','#CAC21F'); 148 $(".box_3 .info").css("color","#CAC21F").text("第一次密碼輸入不正確！"); 149 } 150 } 151 }); 152 $("#apw").keyup(function(event) 153 { 154 var info_user=$(this).val(); 155 var info_pw=$("#pw").val(); 156 if(info_pwflag==1) 157 { 158 if(info_user.length==0) 159 { 160 info_apwflag=1; 161 } 162 else 163 { 164 if(info_user==info_pw) 165 { 166 info_apwflag=1; 167 } 168 else 169 { 170 info_apwflag=0; 171 } 172 } 173 } 174 //alert(info_pw); 175 if(info_pwflag==1) 176 { 177 if(info_apwflag==1) 178 { 179 $(this).parent().css('border-color','#4DAFE4'); 180 $(".box_3 .info").css("color","#4DAFE4").text("確認密碼正確！"); 181 } 182 else 183 { 184 $(this).parent().css('border-color','red'); 185 $(".box_3 .info").css("color","red").text("確認密碼不正確！"); 186 } 187 } 188 else 189 { 190 $(this).parent().css('border-color','#CAC21F'); 191 $(".box_3 .info").css("color","#CAC21F").text("第一次密碼輸入不正確！"); 192 } 193 }); 194 });
<div class="box box_2"> <label class="item">密碼</label> <div class="login_bg pw_bg"> <input id="pw" class="login_input pw" type="password" autocomplete="off" maxlength="16" tabindex="2"> </div> <div class="info"></div> </div> <div class="box box_3"> <label class="item">確認密碼</label> <div class="login_bg apw_bg"> <input id="apw" class="login_input apw" type="password" autocomplete="off" maxlength="16" tabindex="3"> </div> <div class="info"></div> </div>