密码格式验证案例

清疚 2022-11-22 05:14 153阅读 0赞

## 密码格式验证案例： ##

先看效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjA1NDU0Mw_size_16_color_FFFFFF_t_70_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjA1NDU0Mw_size_16_color_FFFFFF_t_70_pic_center 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjA1NDU0Mw_size_16_color_FFFFFF_t_70_pic_center 2]  
*核心思路如下：*

> 一、失去焦点方法  
> myinput.onblur = function () \{  
> //方法体  
> \}  
> 二、利用HTML DOM className 属性，在CSS样式里定义提示、正确、错误的三个样式类

`核心代码如下：`

`结构代码如下：`

`CSS样式代码如下：`

* { 
                padding: 0;
                margin: 0;
            }
            .login { 
                width: 500px;
                height: 100px;
                padding: 50px;
                margin: 50px auto;
                background-color: snow;
                border: 2px solid black;
                border-radius: 15px;
                box-shadow: 10px 10px 10px 10px gainsboro;
            }
            .ipt { 
                width: 200px;
                height: 30px;
            }
            .tips { 
                display: inline-block;
                height: 50px;
                line-height: 50px;
                font-size: 12px;
                color: gray;
                margin-left: 20px;
                padding-left: 50px;
                padding-right: 50px;
                background: url(images/tips.png) no-repeat left center;
            }
            .right { 
                color: greenyellow;
                background-image: url(images/right.png);
            }
            .false { 
                color: red;
                background-image: url(images/false.png);
            }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjA1NDU0Mw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/5ff667d396344e7c8e606b428142c790.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjA1NDU0Mw_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/9f3d742767434038b1adb27b3fc3566d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjA1NDU0Mw_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221120/d029f9a843df474cb30e3ec097987c09.png