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

Answer 2

到目前为止，大多数浏览器都不支持

minlength属性。

相反，您可以尝试下面的

<input type="password" pattern=".{4,}" required> //min chars - 4
<input type="password" pattern=".{4,8}" required> //min chars -  4 max chars - 8

或者您可以使用具有内置属性的jquery或dojo widjets

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

2 个答案: