日期:2014-05-16 浏览次数:20447 次
var ValidatePwd = { Pwd : { color: ['#E6EAED', '#AC0035', '#FFCC33', '#639BCC', '#246626'], text: ['太短', '弱', '一般', '很好', '极佳'] }, Result : 0, ColorInit : function(){ $('#pwdStrong_1,#pwdStrong_2,#pwdStrong_3,#pwdStrong_4').css({"background-color":ValidatePwd.Pwd.color[0]}); }, Evaluate : function(word) { if (word == "") { this.Result = 0; } else if (word.length < 6) { this.Result = 1; } else { this.Result = word.match(/[a-z](?![^a-z]*[a-z])|[A-Z](?![^A-Z]*[A-Z])|\d(?![^\d]*\d)|[^a-zA-Z\d](?![a-zA-Z\d]*[^a-zA-Z\d])/g).length; } }, Check : function(value){ this.Evaluate(value); this.ColorInit(); this.textColor(); }, textColor : function(){console.log( this.Result ); var j=0; for(j;j<parseInt(this.Result);j++){ $("#pwdStrong_"+j).css({"background-color":ValidatePwd.Pwd.color[j]}); } $('#pwdStrong_text').text( ValidatePwd.Pwd.text[j] ) .css({"background-color":ValidatePwd.Pwd.color[j]}); } }
<form > <div> <table> <tr> <td> 密码: </td> <td> <input id="txtPassword" type="password" name="password" style="width: 130px;" maxlength="16" onfocus="InitCss();" /> </td> <td> <div id="tipPosition"> </div> </td> </tr> <tr> <td> </td> <td> <table id="pwdStrong_color"> <tr> <td id="pwdStrong_1"> </td> <td id="pwdStrong_2"> </td> <td id="pwdStrong_3"> </td> <td id="pwdStrong_4"> </td> </tr> </table> </td> <td> <div id="pwdStrong_text"> </div> </td> </tr> </table> </div> </form>
<style> body { font: 13px 宋体; } #tipPosition { width: 400px; height: 16px; line-height: 18px; padding: 2px 30px; } .tip { background: #E6F2FF url(images/register_tip.png) no-repeat 10px center; border: 1px #0E5863 dashed; color: #0E5863; } .error { background: #FBECDF url(images/register_error.png) no-repeat 10px center; border: 1px Red dashed; color: #6D3737; } .success { background: #D6FCD2 url(images/register_success.png) no-repeat 10px center; border: 1px #2F5D36 dashed; color: #3D934A; } #pwdStrong_color { width: 136px; height: 3px; border: 0px; border-collapse: collapse; border-spacing: 0; background: #E6EAED; margin-top: 5px; } #pwdStrong_color td { padding: 0px; width: 44px; } #pwdStrong_text { font: 12px 宋体; } </style>
jQuery(function($) { $("input[name=password]").keydown(function(){ // ValidatePwd.Check( $(this).val() ); }); });