JS----简单表单密码强度检验

来源:互联网 发布:c语言volatile 寄存器 编辑:程序博客网 时间:2024/04/29 16:01
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title>表单常用的密码强度检验</title></head><body><input type="password" id = 'oInput'/><span id = 'oSpan'></span><script>(function(win){    var showStrength = function(_this, showWrap) {        showWrap.style.fontFamily = 'Microsoft Yahei';        var oValue = _this.value,            len = oValue.length,            strengthAll = 0;        var color = ['red', 'orange', 'green'],            strStrength = ['密码长度不得小于6', '密码强度为:初级','密码强度为:中级','密码强度为:高级'];        var strength = function(str) {            var code = str.charCodeAt(0);            if (code >= 48 && code <= 57) {                return 1;            }else if (code >= 97 && code <= 122) {                return 2;            }else {                return 3;            }        }        if (len < 6) {            showWrap.innerHTML = strStrength[0];            showWrap.style.color = color[0];        }else {            for (var i = 0; i < len; ++i) {                strengthAll += strength(oValue[i]);            }            if (strengthAll < 10) {                showWrap.innerHTML = strStrength[1];                showWrap.style.color = color[0];            }else if (strengthAll >= 10 && strengthAll < 16) {                showWrap.innerHTML = strStrength[2];                showWrap.style.color = color[1];            }else {                showWrap.innerHTML = strStrength[3];                showWrap.style.color = color[2];            }        }    }    win.showStrength = showStrength;})(window)</script><script>    var input = document.getElementById('oInput');    var span = document.getElementById('oSpan');    input.onkeyup = function() {        var self = this;        showStrength(self, span);    }</script></body></html>

效果类似:
这里写图片描述

0 0