依照惯例先让各位看官看下效果,然后再看代码
1 <input id="passw" type="password" /> 2 <div class="maxdiv" > 3 <div></div> 4 <div></div> 5 <div></div> 6 </div> 7 <span></span>
1 .maxdiv div{ 2 height:10px; 3 width:20px; 4 border:1px solid #000; 5 float:left; 6 margin:20px 2px 0px 5px; 7 }
下面就看js啦...
$(function(){ $(".maxdiv").hide(); $("#passw").keyup(function(){ var yell=/^\w+$/; var vhtml=$("#passw").val(); if(yell.test(vhtml)==true && vhtml.length>=6 && vhtml.length<8 ) { $(".maxdiv").show(); $(".maxdiv :first").attr("style","background:red"); $(".maxdiv :gt(0)").attr("style",""); $('span').text("弱"); }else if(yell.test(vhtml)==true && vhtml.length>=8 && vhtml.length<10 || vhtml.indexOf("@")>0 && vhtml.indexOf(".")<0) { $(".maxdiv").show(); $(".maxdiv :lt(2)").attr("style","background:yellow"); $(".maxdiv :last").attr("style",""); $('span').text("中"); }else if (yell.test(vhtml)==true && vhtml.length>=8 && vhtml.length<10 || vhtml.indexOf(".")>0 && vhtml.indexOf("@")<0 ) { $(".maxdiv").show(); $(".maxdiv :lt(2)").attr("style","background:yellow"); $(".maxdiv :last").attr("style",""); $('span').text("中"); } else if (vhtml.indexOf("@")>0 && vhtml.indexOf(".")>0 || vhtml.indexOf("*")>0 && vhtml.length>=10 ) { $(".maxdiv").show(); $(".maxdiv div").attr("style","background:green"); $('span').text("强"); } if(vhtml.length<6) { $(".maxdiv").hide(); $(".maxdiv div").attr("style",""); $('span').html(""); } }); })