javascripit实现密码强度检测代码给大家分享

发布时间：2023-08-24 14:21:17 所属栏目：教程来源：

导读：代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

    <title>

        密码强度检测

    </title>

    <style type="text/css">

        body{font:12px/1.5 Arial;} input{float:left;font-size:12px;width:150px;font-family:arial;border:1px

        solid #ccc;padding:3px;} input.correct{border:1px solid green;} input.error{border:1px

        solid red;} #tips{float:left;margin:2px 0 0 20px;} #tips span{float:left;width:50px;height:20px;color:#fff;overflow:hidden;background:#ccc;margin-right:2px;line-height:20px;text-align:center;}

        #tips.s1 .active{background:#f30;} #tips.s2 .active{background:#fc0;} #tips.s3

        .active{background:#cc0;} #tips.s4 .active{background:#090;}

    </style>

    <script type="text/javascript">

        window.onload = function() {

            var oTips = document.getElementById("tips");

            var oInput = document.getElementsByTagName("input")[0];

            var aSpan = oTips.getElementsByTagName("span");

            var aStr = ["弱", "中", "强", "非常好"];

            var i = 0;

            oInput.onkeyup = oInput.onfocus = oInput.onblur = function() {

                var index = checkStrong(this.value);

                this.className = index ? "correct": "error";

                oTips.className = "s" + index;

                for (i = 0; i < aSpan.length; i++) aSpan[i].className = aSpan[i].innerHTML = "";

                index && (aSpan[index - 1].className = "active", aSpan[index - 1].innerHTML = aStr[index - 1])

            }

        };

        /** 强度规则

            + ------------------------------------------------------- +

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!