网页中密码强度验证原理。
哈哈,只是简单的原理(代码可能不是这样写的),明白原理就好~~~~~
<body > </body> </html> <script type="text/javascript"> var Detection = function () { var pwd = document.getElementById(‘pwd‘).value; DIV = document.getElementById(‘TBDIV‘), //DIV.innerHTML = ‘‘; TB=document.getElementById(‘pwdStrong‘), TDS = TB.getElementsByTagName(‘td‘), len = TDS.length; for (var i = 0; i < len; i++) { TDS[i].style.backgroundColor = ‘silver‘; } var regFigure = /^\d+$/; figure = regFigure.test(pwd), regLetter = /^[A-Za-z]+$/, letter = regLetter.test(pwd), //var regAlphanumeric =/^\w{1,6}$/;下划线记录在特殊字符中 //var alphanumeric = regAlphanumeric.test(pwd); regAlphanumericMore = /^[A-Za-z0-9]+$/, alphanumericmore = regAlphanumericMore.test(pwd), regSpecialCharacter = /[^A-Za-z0-9]+/,//不适用\W specialCharecter = pwd.match(regSpecialCharacter); if (pwd.length >= 6 && pwd.length <= 16) { // DIV.appendChild(TB); DIV.style.display = ‘block‘; if (figure || letter) {//全数字或字母并且长度小于是6位:弱 TDS[0].style.backgroundColor = ‘red‘; } else if (specialCharecter) {//大于6位包含特殊字符:强 TDS[0].style.backgroundColor = ‘green‘; TDS[1].style.backgroundColor = ‘green‘; TDS[2].style.backgroundColor = ‘green‘; } else if (regAlphanumericMore) {//大于6位并且不包含特殊字符:中 TDS[0].style.backgroundColor = ‘yellow‘; TDS[1].style.backgroundColor = ‘yellow‘; } } else { DIV.style.display = ‘none‘; // DIV.innerHTML = ‘<strong>密码长度应为6~16个字符</strong>‘; } }; var arrInfo = [‘弱‘, ‘中‘, ‘强‘], pwdPlease = ‘请输入密码:‘; window.onload = function () { var stron = document.createElement(‘strong‘); stron.innerText = pwdPlease; var txt = document.createElement(‘input‘); txt.id = ‘pwd‘; txt.onkeyup = Detection; var TB = document.createElement(‘table‘); TB.border = 1; TB.style.position = ‘absolute‘; TB.style.top = ‘40px‘; TB.style.left = ‘103px‘; TB.style.width = ‘155px‘; TB.id = ‘pwdStrong‘; var TR = TB.insertRow(-1); for (var i = 0; i < 3; i++) { var TD = TR.insertCell(-1); TD.innerText = arrInfo[i]; //TR.appendChild(TD); TD.style.backgroundColor = ‘silver‘; TD.align = ‘center‘; TD.id = i; } var DIV = document.createElement(‘div‘); DIV.id = ‘TBDIV‘; DIV.style.display = ‘none‘; DIV.appendChild(TB); document.body.appendChild(stron); document.body.appendChild(txt); document.body.appendChild(DIV); }; </script>
百度浏览器效果图:
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。