HTML5中是否有一个minlength验证属性?

html HTML

米亚Near

2020-03-18

似乎该字段minlength属性<input>无效。

HTML5中是否还有其他属性可以设置字段值的最小长度?

第2059篇《HTML5中是否有一个minlength验证属性?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

13个回答
Gil番长 2020.03.18

就我而言,我在其中验证了大部分手动和使用Firefox(43.0.4),minlength并且validity.tooShort不可不幸。

由于只需要存储最小长度即可继续,因此一种简便的方法是将此值分配给输入标签的另一个有效属性。在这种情况下,然后,可以使用minmaxstep从[类型=“号码”]的输入特性。

与其将这些限制存储在数组中,不如将其存储在同一输入中,而不是获取元素ID以匹配数组索引,则更加容易。

猿伽罗 2020.03.18

添加最大值和最小值,您可以指定允许值的范围:

<input type="number" min="1" max="999" />
Mandy路易 2020.03.18

我使用了max和min,然后使用了required,它对我来说很好,但是不确定是不是一种编码方法。希望对您有所帮助

<input type="text" maxlength="13" name ="idnumber" class="form-control"  minlength="13" required>
猿Mandy 2020.03.18

请参阅http://caniuse.com/#search=minlength,某些浏览器可能不支持此属性。


如果“类型”的值是其中之一:

文字,电子邮件,搜索,密码,电话或url(警告:不包括数字 | 现在没有浏览器支持“电话” -2017.10)

使用minlength(/ maxlength)属性,它指定最小字符数。

例如。

<input type="text" minlength="11" maxlength="11" pattern="[0-9]*" placeholder="input your phone number">

或使用“模式”属性:

<input type="text" pattern="[0-9]{11}" placeholder="input your phone number">

如果“类型”是number,则不支持算法的最小长度(/ maxlength),可以使用min(/ max)属性代替。

例如。

<input type="number" min="100" max="999" placeholder="input a three-digit number">
有壳网 2020.03.18

我注意到有时在chrome中,当自动填充功能打开并且字段由自动填充浏览器内置方法填充字段时,它会绕过最小长度验证规则,因此在这种情况下,您将必须通过以下属性禁用自动填充功能:

autocomplete =“ off”

<input autocomplete="new-password" name="password" id="password" type="password" placeholder="Password" maxlength="12" minlength="6" required />
JinJinStafanL 2020.03.18

minlength现在大多数浏览器都广泛支持attribute属性

<input type="text" minlength="2" required>

但是,与其他HTML5功能一样,此全景图中也缺少IE11。因此,如果您拥有广泛的IE11用户群,请考虑使用大多数浏览器(包括IE11)pattern几乎都支持HTML5属性

为了有一个好的统一的实现,并且可能是可扩展的或动态的(基于生成HTML的框架),我将投票给该pattern属性:

<input type="text" pattern=".{2,}" required>

使用时,可用性仍然很小pattern使用时,用户将看到不直观(非常普通)的错误/警告消息pattern请参阅以下jsfiddle

<h3>In each form type 1 character and press submit</h3>
</h2>
<form action="#">
  Input with minlength: <input type="text" minlength="2" required name="i1">
  <input type="submit" value="Submit">
</form>
<br>
<form action="#">
  Input with patern: <input type="text" pattern=".{2,}" required name="i1">
  <input type="submit" value="Submit">
</form>

例如,在Chrome(但在大多数浏览器中类似)中,您会收到以下错误消息:

Please lengthen this text to 2 characters or more (you are currently using 1 character)

通过使用minlength

Please match the format requested

通过使用pattern

Harry神乐 2020.03.18

无论使用与否,我都使用maxlength和minlength,required它对HTML5非常有效。

<input id="passcode" type="password" minlength="8" maxlength="10">

`

Jim猴子Eva 2020.03.18

不是HTML5,而是实用的:如果碰巧使用AngularJS,则可以同时使用ng-minlength输入和文本区域。另请参阅此Plunk

前端梅 2020.03.18

minLength属性(与maxLength不同)在HTML5中本身不存在。但是,如果字段包含少于x个字符,则有一些方法可以验证该字段。

在下面的链接中使用jQuery提供了一个示例:http : //docs.jquery.com/Plugins/Validation/Methods/minlength

<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
<script type="text/javascript">
jQuery.validator.setDefaults({
    debug: true,
    success: "valid"
});;
</script>

  <script>
  $(document).ready(function(){
    $("#myform").validate({
  rules: {
    field: {
      required: true,
      minlength: 3
    }
  }
});
  });
  </script>
</head>
<body>

<form id="myform">
  <label for="field">Required, Minimum length 3: </label>
  <input class="left" id="field" name="field" />
  <br/>
  <input type="submit" value="Validate!" />
</form>

</body>
</html>
猴子猪猪 2020.03.18

是的,那里。就像maxlength。W3.org文档:http : //www.w3.org/TR/html5/forms.html#attr-fe-minlength

如果minlength不起作用,请使用pattern@ Pumbaa80提及属性作为input标记。

对于textarea: 用于设置max;使用maxlength和分钟转到此链接

您将在此处找到最大和最小。

JimItachi 2020.03.18

您可以使用pattern属性也需要required属性,否则约束验证将排除具有空值的输入字段

<input pattern=".{3,}"   required title="3 characters minimum">
<input pattern=".{5,10}" required title="5 to 10 characters">

If you want to create the option to use the pattern for "empty, or minimum length", you could do the following:

<input pattern=".{0}|.{5,10}" required title="Either 0 OR (5 to 10 chars)">
<input pattern=".{0}|.{8,}"   required title="Either 0 OR (8 chars minimum)">
米亚宝儿 2020.03.18

这是仅HTML5的解决方案(如果您需要最小长度5,最大长度10个字符验证)

http://jsfiddle.net/xhqsB/102/

<form>
  <input pattern=".{5,10}">
  <input type="submit" value="Check"></input>
</form>
ASamGreen 2020.03.18

目前一个minlength房地产HTML5规范现在,还有validity.tooShort接口。

现在,所有现代浏览器的最新版本均启用了这两种功能。有关详细信息,请参见https://caniuse.com/#search=minlength

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android