js输入框错误提示代码

代码如下（大佬勿喷）：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>test</title>
        <style type="text/css">
            div{ text-align: center; margin-top: 100px;}
            input{ color: #000; outline: none;}
            .span{ font-size: 14px; color: #999999; margin: 0 0 0 10px; user-select: none;}
            .wrong{ color: red;}
            .right{ color: green;}
        </style>
    </head>
    <body>
        <div>
            <input type="text" />
            <span class="span">* 请输入6~16位密码</span>
        </div>
        <script>
            // 1. 获取元素
            var input = document.querySelector("input");
            var span = document.querySelector("span");
            // 2. 注册事件 失去焦点
             input.onblur = function(){
                 // 根据表单里面值得长度 input.value.length
                 
                 if (this.value.length <6 || this.value.length >16){
                     span.innerHTML = "× 输入错误，请重新输入！";
                     span.className = "span wrong";
                 }else{
                     span.innerHTML = "√ 输入正确";
                     span.className = "span right";
                 }
             }
        </script>
    </body>
</html>

 

posted @ 2020-06-12 09:45  君莫笑007  阅读(1358)  评论(0)    收藏  举报