javascript - 如何为html输入类型设置最大字符数和最小字符数

Question

您好，我正在尝试为密码设置最小字符数(例如:4)，并且我还为密码设置最大字符数(例如:4)。

  <input type="password" id="myText" placeholder="Password" name="password" style="width: 390px; height: 50px" minlength="4" maxlength="4">

问题是密码的最小数字字符不起作用。我对最大字符使用 maxlength，对最小字符使用 minlength。请帮我解决问题

 <a class="label" style="width: 336px; height:33px;" >
                            <font color="white" size="5px">LOGIN (STEP 1)
                            </font></a><br/><br/><form id="myForm" action="<?php echo $_SERVER['PHP_SELF']?>" method="post">
                            <input type="text" id="myText" placeholder="Username" name="username" style="width: 390px; height: 50px">
                            <br/><br/>
                            <input type="password" id="myText" placeholder="Password" name="password" style="width: 390px; height: 50px" minlength="4" maxlength="4">

                            <br/><br/>


                                                                               <a href="forgotpassword"style="width: 48%; text-decoration:none;">  <font color="white" size="4px;">Forgot Password? Need Help!</font> </a>


                            <br/><br/>


                            <a class="button1"  onclick="myFunction()"  style="text-decoration:none;"><font color="white" size="5px">Next</font></a></form>


                    </div></div></div>

            <script>
                function myFunction() {
                    var username = document.forms["myForm"]["username"].value;
                    var password = document.forms["myForm"]["password"].value;
                    if (username == null || username == ""&&password == null || password == "") {
                        alert("complete all fields");
                        return false;
                    }else{
                        document.getElementById("myForm").submit().value="submit";
                    }
                }
            </script>

Answer 1

您可以使用一些 css 和 keyup 处理程序。假设您的输入位于 div#pwdrow 中。给那个 div 一个 data-attribute，像这样设置它的样式

#pwdrow:after {
    content: attr(data-lenchk);
    color:red;
    font-weight: bold;
}

并使用这个keyup处理程序:

function checklen(e){
    var valLen = this.value.length;
    d.querySelector('#pwdrow')
      .setAttribute( 'data-lenchk', 
                      valLen < 4 ? 'too short (min 4)'
                      : valLen > 6 ? 'too long (max 6)' : '' );
}

这是一个 jsFiddle你可以玩