如何設置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

到目前爲止大多數瀏覽器都不支持minlength屬性。

相反，你可以試試下面的

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

，或者你可以使用jQuery或道場widjets有內置

Answer 2

可以使用了CSS和一個keyup處理程序屬性MINLENGTH。假設你的輸入在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你可以