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

嗨，我正在尝试为密码设置最小字符数（例如：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>

下一个
函数myFunction（）{
var username=document.forms[“myForm”][“username”].value；
var password=document.forms[“myForm”][“password”].value；
如果（用户名==null | |用户名==“”&密码==null | |密码==“”）{
警报（“填写所有字段”）；
返回false；
}否则{
document.getElementById（“myForm”）.submit（）.value=“submit”；
}
}

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

相反，你可以试试下面的方法

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

//最小字符数-4
//最小字符数-4最大字符数-8

---

或者您可以使用jquery或dojo widjets，它们内置了minlength属性

您可以使用一点css和一个

keyup

处理程序。假设您的输入位于

div#pwdrow

中。将该div设为a

数据属性

，如下所示

#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)' : '' );
}

功能检查（e）{
var valLen=this.value.length；
d、 查询选择器（“#pwdrow”）
.setAttribute（'data lenchk'，
valLen<4？“太短（最小值4）”
：valLen>6？’太长（最多6个）：“”；
}

---

以下是一个您可以使用的

minlength属性在许多浏览器中都不受支持