短視訊原始碼，密碼框驗證資訊文字提示實現的相關程式碼

案例分析：

1.首先判斷的事件是表單失去焦點onblur

2.如果輸入正確則提示正確的資訊顏色為綠色

3.如果輸入不是6到16位，則提示錯誤資訊顏色為紅色

4.因為裡面變化樣式較多，我們採取className修改樣式

示例程式碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            * {
                margin: 0%;
                padding: 0%;
                box-sizing: border-box;
            }
            .box {
                width: 400px;
                height: 30px;
                
                margin: 100px auto;
                display: flex;
            }
            input {
                height: 100%;
                width: 200px;
            }
            .message {
                display: block;
                height: 100%;
                width: 200px;
                padding-left: 10px;
                padding-top: 7px;
                font-size: 12px;
                color: #777;
            }
            .wrong {
                color: red;
            }
            .right {
                color: green;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <input type="password">
            <span class="message">6-16位字元，區分大小寫</span>
        </div>
       <script>
           var input = document.querySelector('input');
           var span = document.querySelector('span');
           input.onblur = function() {
               var count = input.value.length;
               if((count<6&&count>0)) {
                   span.innerHTML = '密碼較短，最短支援6個字元';
                   span.className = 'message wrong';
               }
               else if(count>16) {
                   span.innerHTML = '密碼較長，最長支援16個字元';
                   span.className = 'message wrong';
               }
               else if(count>=6 && count<=16) {
                   span.innerHTML = '您輸入的正確';
                   span.className = 'message right';
               }
               else {
                   span.innerHTML = '6-16位字元，區分大小寫';
                   span.style.color = '#777';
               }
               
           }
        </script>
    </body>
</html>

以上就是短視訊原始碼，密碼框驗證資訊文字提示實現的相關程式碼，更多內容歡迎關注之後的文章

短視訊原始碼，密碼框驗證資訊文字提示

相關文章