基于JavaScript實現(xiàn)密碼框驗證信息

更新時間：2021年11月11日 08:58:40 作者：前端小歌謠

這篇文章主要為大家詳細介紹了基于JavaScript實現(xiàn)密碼框驗證信息，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JavaScript實現(xiàn)密碼框驗證信息的具體代碼，供大家參考，具體內(nèi)容如下

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 600px;
            margin: 100px auto;
        }
        
        .message {
            display: inline-block;
            font-size: 12px;
            color: #999;
            background: url(./img/1.png) no-repeat left center;
            padding-left: 10px;
        }
        
        .wrong {
            color: red;
            background-image: url(img/2.png);
        }
        
        .right {
            color: green;
            background-image: url(img/3.png);
        }
    </style>
</head>
 
<body>
    <div class="register">
        <input type="password" class="ipt">
        <p class="message">請輸入6-16位密碼</p>
    </div>
    <script>
        //獲取元素
        var ipt = document.querySelector('.ipt');
        var message = document.querySelector('.message');
        //注冊事件
        ipt.onblur = function() {
            //根據(jù)表單的值的長度
            if (this.value.length < 6 || this.value.length > 16) {
                message.className = 'message wrong';
                message.innerHTML = '你輸入的位數(shù)不對';
            } else {
                message.className = 'message right';
                message.innerHTML = '輸入正確';
            }
        }
    </script>
</body>
 
</html>

運行結(jié)果

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

js
密碼框

相關(guān)文章

IE及firefox下獲取及設置樣式值的代碼
廢話少說，直接上Code,對IE與FF下的差異，均在代碼中有相關(guān)的注解
2010-03-03
jquery 實現(xiàn)上下滾動效果示例代碼
上下滾動的效果，不用說，大家都有看到過，本文為大家介紹下使用jquery實現(xiàn)上下滾動效果，感興趣的朋友可以參考下，希望對大家有所幫助
2013-08-08
js 生成隨機漢字的問題
2008-02-02
JS前端中WebSocket的使用方法舉例
websocket是H5才開始提供的一種在單個TCP連接上進行全雙工通訊的協(xié)議,下面這篇文章主要給大家介紹了關(guān)于JS前端中WebSocket使用的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2023-03-03
Js 隨機數(shù)產(chǎn)生6位數(shù)字
Js隨機產(chǎn)生6為數(shù)字的代碼，需要的朋友可以參考下。
2010-05-05
深入理解JavaScript中的尾調(diào)用(Tail Call)
尾調(diào)用（Tail Call）是函數(shù)式編程的一個重要概念，下面這篇文章主要給大家深入的介紹了關(guān)于JavaScript中尾調(diào)用的相關(guān)資料，文中介紹的非常詳細，相信對大家具有一定的參考價值，有需要的朋友們下面來一起看看吧。
2017-02-02
JavaScript用JQuery呼叫Server端方法示例代碼
這篇文章主要介紹了JavaScript用JQuery呼叫Server端方法,需要的朋友可以參考下
2014-09-09
微信小程序三級聯(lián)動選擇器使用方法
這篇文章主要為大家詳細介紹了微信小程序三級聯(lián)動選擇器使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-02-02
Javascript 中的 && 和 || 使用小結(jié)
Javascript 中的 && 和 || ，有時候用作條件判斷，非常的簡潔，不熟悉的朋友可能不太了解，這里最后有個朋友補充，非常的好。
2010-04-04
JS 獲取鼠標左右鍵的鍵值方法
這篇文章主要介紹了JS 獲取鼠標左右鍵的鍵值方法，很簡單，但很實用，特別是在做與用戶交互相關(guān)的東西
2014-10-10