直播平台源码，JavaScript表单验证密码强度

第一种：

HTML部分：

<br><!DOCTYPE HTML> <br><html> <br><head> <br><meta charset="utf-8"/> <br><title>密码强度</title> <br><style type="text/css"> <br>#passStrength{height:6px;width:120px;border:1px solid #ccc;padding:2px;} <br>.strengthLv1{background:red;height:6px;width:40px;} <br>.strengthLv2{background:orange;height:6px;width:80px;} <br>.strengthLv3{background:green;height:6px;width:120px;} <br></style> <br></head> <br><body> <br><input type="password" name="pass" id="pass" maxlength="16"/> <br><div> <br><em>密码强度：</em> <br><div id="passStrength"></div> <br></div> <br></body> <br></html> <br><script type="text/javascript" src="js/passwordStrength.js"></script> <br><script type="text/javascript"> <br>new PasswordStrength('pass','passStrength'); <br></script> 

JavaScript部分：

function PasswordStrength(passwordID,strengthID){ <br>this.init(strengthID); <br>var _this = this; <br>document.getElementById(passwordID).onkeyup = function(){ <br>_this.checkStrength(this.value); <br>} <br>}; <br>PasswordStrength.prototype.init = function(strengthID){ <br>var id = document.getElementById(strengthID); <br>var div = document.createElement('div'); <br>var strong = document.createElement('strong'); <br>this.oStrength = id.appendChild(div); <br>this.oStrengthTxt = id.parentNode.appendChild(strong); <br>}; <br>PasswordStrength.prototype.checkStrength = function (val){ <br>var aLvTxt = ['','低','中','高']; <br>var lv = 0; <br>if(val.match(/[a-z]/g)){lv++;} <br>if(val.match(/[0-9]/g)){lv++;} <br>if(val.match(/(.[^a-z0-9])/g)){lv++;} <br>if(val.length < 6){lv=0;} <br>if(lv > 3){lv=3;} <br>this.oStrength.className = 'strengthLv' + lv; <br>this.oStrengthTxt.innerHTML = aLvTxt[lv]; <br>}; 

第二种：

<!DOCTYPE html><br><html><br><head><br> <meta charset="UTF-8"><br> <title>验证密码强度</title><br> <style type="text/css"><br> *{margin: 0;padding: 0;}<br> body{background:#ccc;}<br> #demo{width:400px;padding:50px;background:#efefef;border: 1px solid #999;line-height:40px;margin:100px auto 0;}<br> #strength_length{height:6px;width:100px;padding:2px;border: 1px solid #ccc;}<br> .lv1{background:red;}<br> .lv2{background:blue;width:200px;}<br> .lv3{background:green;width:300px;}<br> </style><br></head><br><body><br> <div id="demo"><br> <label for="ipt">密码：</label><br> <input type="text" id="ipt"><br/><br> <em>密码强度：</em><em id="strength"></em><br> <div id="strength_length"></div><br> </div><br></body><br><script type="text/javascript"><br> (function(window){<br> function $(id){<br> return document.getElementById(id);<br> };<br> var arr = ["","低","中","高"];<br> // 获取对象<br> var ipt = $("ipt"),strength = $("strength"),strLength = $("strength_length");<br> // 密码输入事件<br> ipt.onkeyup = function(){<br> var s = 0;<br> var txt = this.value;<br> if( /[a-zA-Z]/.test(txt) ){<br> s++;<br> };<br> if( /[0-9]/.test(txt) ){<br> s++;<br> };<br> if( /[^0-9a-zA-Z]/.test(txt) ){<br> s++;<br> };<br> if( txt.length <6 ){<br> s = 0;<br> };<br> strength.innerHTML = arr[s];<br> strLength.className = "lv" + s;<br> }<br> })(window)<br></script><br></html>