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

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

案例分析：

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>    

​

以上就是短视频源码，密码框验证信息文字提示实现的相关代码， 更多内容欢迎关注之后的文章

 

posted @ 2022-03-31 14:05  云豹科技-苏凌霄  阅读(43)  评论(0)    收藏  举报