HTML/PHP设置输入字段为一个精确的数字 - HTML/PHP set input field to an exact number.

HTML/PHP set input field to an exact number.

我使用这段代码来限制我的字段接受确切的字符数，但是maxlength =" 10"也接受少于10个字符。我需要我的输入字段采取确切的10个字符，如果如果输入小于10，就会发送错误。我怎么能做到呢?下面是我的代码:

 <form action="login.php">
   Username: <input type="text" name="usrname" maxlength="10"><br>
  <input type="submit" value="Submit">
</form>

正如在这个答案中提到的:https://stackoverflow.com/a/10294291/1515869

如果你想坚持HTML5，你可以使用这样的模式:

<input pattern=".{10}"   required placeholder="only 10 characters">

但是，请注意，在上面链接的答案中，您还需要所需的属性，以便通过约束验证。

你可以像下面这样使用javascript:

<script type="text/javascript">    
    function checkLength(){
        var usrname = document.getElementById("usrname");
        if(usrname.value.length == 10){
            alert("success");
        } 
        else{
            alert("make sure the input is 10 characters long")
        }
    }
</script>
<form action="login.php">
   Username: <input type="text" id="usrname" maxlength="10"></input><br>
   <input type="submit" value="submit" onclick="checkLength()" />
</form>

你可能也想做一些服务器端检查，因为客户端Javascript可以被修改。

if(strlen($_POST['usrname']) == 10){
   // Length matches
} else {
   // Length does not match
}

如果您打算在不同的输入和长度下重用它，那么创建一个函数可能是一个更好的主意。

使用HTML <input>模式属性

<form action="login.php">
   Username: <input type="text" name="usrname" pattern=".{10}" required><br>
  <input type="submit" value="Submit">
</form>