lesorb 发表于 2013-2-8 01:03:26

JS检查密码强弱(jquery框架支持)

请自行下载jquery框架验证。本例已经经jquery-1.4.2.min.js验证通过。

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});},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]*)|\d(?![^\d]*\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});}$('#pwdStrong_text').text( ValidatePwd.Pwd.text ).css({"background-color":ValidatePwd.Pwd.color});}}

附加html格式:
<form ><div><table><tr><td>密码:</td><td><input id="txtPassword" type="password" name="password" style="width: 130px;" maxlength="16"/></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>

附加CSS样式:

<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").keydown(function(){//ValidatePwd.Check( $(this).val() );});});
页: [1]
查看完整版本: JS检查密码强弱(jquery框架支持)