短视频源码，密码框验证信息文字提示

短视频源码，密码框验证信息文字提示实现的相关代码

案例分析：

1.首先判断的事件是表单失去焦点onblur

2.如果输入正确则提示正确的信息颜色为绿色

3.如果输入不是6到16位，则提示错误信息颜色为红色

4.因为里面变化样式较多，我们采取className修改样式

示例代码：

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