jquery应用验证密码和确认密码一致性
需要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>