需要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>