js密码强度验证

最新推荐文章于 2023-11-30 15:49:28 发布

Y_JY

最新推荐文章于 2023-11-30 15:49:28 发布

阅读量546

点赞数

分类专栏： JavaScript 文章标签： javascript 密码

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

源码:

//=================HTML页面=================

 
   01<body onload="InitCss();">
 
   02    <form>
 
   03    <div>
 
   04        <table>
 
   05            <tr>
 
   06                <td>
 
   07                    密码:
 
   08                </td>
 
   09                <td>
 
   10                    <input id="txtPassword" type="password" style="width: 130px;" maxlength="16"onfocus="InitCss();"
 
   11                        onblur="ValidateInput('password',this.value)" onkeydown="validatePwdStrong(this.value);" />
 
   12                </td>
 
   13                <td>
 
   14                    <div id="tipPosition">
 
   15                    </div>
 
   16                </td>
 
   17            </tr>
 
   18            <tr>
 
   19                <td>
 
   20                </td>
 
   21                <td>
 
   22                    <table id="pwdStrong_color">
 
   23                        <tr>
 
   24                            <td id="pwdStrong_1">
 
   25                            </td>
 
   26                            <td id="pwdStrong_2">
 
   27                            </td>
 
   28                            <td id="pwdStrong_3">
 
   29                            </td>
 
   30                            <td id="pwdStrong_4">
 
   31                            </td>
 
   32                        </tr>
 
   33                    </table>
 
   34                </td>
 
   35                <td>
 
   36                    <div id="pwdStrong_text">
 
   37                    </div>
 
   38                </td>
 
   39            </tr>
 
   40        </table>
 
   41    </div>
 
   42    </form>
 
   43</body>

//=================JS文件=================

 
   01//使用$替换document.getElementById函数
 
   02var $ = function(v) { return document.getElementById(v); }
 
   03  
 
   04/******************************************************验证用户输入******************************************************/
 
   05function ValidateInput(element, value) {
 
   06    //验证密码
 
   07    if (element == "password") {
 
   08        if (value.toString().length < 6) {
 
   09            $('tipPosition').className = 'error';
 
   10            $('tipPosition').innerHTML = "密码设置错误。密码长度过小。";
 
   11            return;
 
   12        }
 
   13        else {
 
   14            $('tipPosition').className = 'success';
 
   15            $('tipPosition').innerHTML = "填写正确。";
 
   16        }
 
   17    }
 
   18}
 
   19/*================================密码验证JS =========== Begin=======================================*/
 
   20//密码初始化的样式
 
   21function InitCss() {
 
   22    $('tipPosition').className = 'tip';
 
   23    $('tipPosition').innerHTML = "最小长度:6。 最大长度:16。";
 
   24}
 
   25  
 
   26/*================================密码强度 ===========Begin=======================================*/
 
   27  
 
   28function Evaluate(word) {
 
   29    return word.replace(/^(?:([a-z])|([A-Z])|([0-9])|(.)){5,}|(.)+$/g, "$1$2$3$4$5").length;
 
   30}
 
   31  
 
   32function validatePwdStrong(value) {
 
   33    var pwd = {
 
   34        color: ['#E6EAED', '#AC0035', '#FFCC33', '#639BCC', '#246626'],
 
   35        text: ['太短', '弱', '一般', '很好', '极佳']
 
   36    };
 
   37    function colorInit() {
 
   38        $('pwdStrong_1').style.backgroundColor = pwd.color[0];
 
   39        $('pwdStrong_2').style.backgroundColor = pwd.color[0];
 
   40        $('pwdStrong_3').style.backgroundColor = pwd.color[0];
 
   41        $('pwdStrong_4').style.backgroundColor = pwd.color[0];
 
   42    }
 
   43    if (Evaluate(value) == 1) {
 
   44        colorInit();
 
   45        $('pwdStrong_1').style.backgroundColor = pwd.color[1];
 
   46        $('pwdStrong_text').innerHTML = pwd.text[1];
 
   47        $('pwdStrong_text').style.color = pwd.color[1];
 
   48    }
 
   49    else if (Evaluate(value) == 2) {
 
   50        colorInit();
 
   51        $('pwdStrong_1').style.backgroundColor = pwd.color[2];
 
   52        $('pwdStrong_2').style.backgroundColor = pwd.color[2];
 
   53        $('pwdStrong_text').innerHTML = pwd.text[2];
 
   54        $('pwdStrong_text').style.color = pwd.color[2];
 
   55    }
 
   56    else if (Evaluate(value) == 3) {
 
   57        colorInit();
 
   58        $('pwdStrong_1').style.backgroundColor = pwd.color[3];
 
   59        $('pwdStrong_2').style.backgroundColor = pwd.color[3];
 
   60        $('pwdStrong_3').style.backgroundColor = pwd.color[3];
 
   61        $('pwdStrong_text').innerHTML = pwd.text[3];
 
   62        $('pwdStrong_text').style.color = pwd.color[3];
 
   63    }
 
   64    else if (Evaluate(value) == 4) {
 
   65        $('pwdStrong_1').style.backgroundColor = pwd.color[4];
 
   66        $('pwdStrong_2').style.backgroundColor = pwd.color[4];
 
   67        $('pwdStrong_3').style.backgroundColor = pwd.color[4];
 
   68        $('pwdStrong_4').style.backgroundColor = pwd.color[4];
 
   69        $('pwdStrong_text').innerHTML = pwd.text[4];
 
   70        $('pwdStrong_text').style.color = pwd.color[4];
 
   71    }
 
   72}

//=================CSS文件=================

 
   01body
 
   02{
 
   03    font: 13px 宋体;
 
   04}
 
   05/*密码验证提示CSS  --------------------------------开始--------------------------------*/
 
   06#tipPosition
 
   07{
 
   08    width: 400px;
 
   09    height: 16px;
 
   10    line-height: 18px;
 
   11    padding: 2px 30px;
 
   12}
 
   13.tip
 
   14{
 
   15    background: #E6F2FF url(images/register_tip.png) no-repeat 10px center;
 
   16    border: 1px #0E5863 dashed;
 
   17    color: #0E5863;
 
   18}
 
   19.error
 
   20{
 
   21    background: #FBECDF url(images/register_error.png) no-repeat 10px center;
 
   22    border: 1px Red dashed;
 
   23    color: #6D3737;
 
   24}
 
   25.success
 
   26{
 
   27    background: #D6FCD2 url(images/register_success.png) no-repeat 10px center;
 
   28    border: 1px #2F5D36 dashed;
 
   29    color: #3D934A;
 
   30}
 
   31/*密码强度CSS  --------------------------------开始--------------------------------*/
 
   32#pwdStrong_color
 
   33{
 
   34    width: 136px;
 
   35    height: 3px;
 
   36    border: 0px;
 
   37    border-collapse: collapse;
 
   38    border-spacing: 0;
 
   39    background: #E6EAED;
 
   40    margin-top: 5px;
 
   41}
 
   42#pwdStrong_color td
 
   43{
 
   44    padding: 0px;
 
   45    width: 44px; /*如不加td宽度,Google的Chrome不会正常显示*/
 
   46}
 
   47#pwdStrong_text
 
   48{
 
   49    font: 12px 宋体;
 
   50}