Question Existe-t-il un attribut de validation minlength dans HTML5?


Il semble que minlength attribut pour un <input> le champ ne fonctionne pas.

Y at-il un autre attribut dans HTML5 avec l'aide de laquelle je peux définir la longueur minimale d'une valeur pour les champs?


502
2018-04-23 13:56


origine


Réponses:


Vous pouvez utiliser le pattern attribut. le required attribut est également nécessaire, sinon un champ de saisie avec une valeur vide sera exclu de validation de contrainte.

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

Si vous voulez créer l'option pour utiliser le modèle pour "vide, ou longueur minimale", vous pouvez faire ce qui suit:

<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)">

1108
2018-04-24 08:24



est une minlength propriété dans Spécification HTML5 maintenant, ainsi que le validity.tooShort interface.

Les deux sont maintenant activés dans les versions récentes de tous les navigateurs modernes. Pour plus de détails, voir https://caniuse.com/#search=minlength.


113
2018-06-27 09:31



Voici une solution HTML5 uniquement (si vous voulez minlength 5, validation maxlength 10 caractères)

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

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

15
2017-08-12 11:02



Oui, le voilà. C'est comme maxlength. Documentation W3.org: http://www.w3.org/TR/html5/forms.html#attr-fe-minlength

Au cas où minlength ne fonctionne pas, utilisez le pattern attribut tel que mentionné par @ Pumbaa80 pour la input marque.

Pour textarea: Pour le réglage max; utilisation maxlength et pour min aller à ce lien.

Vous trouverez ici à la fois pour max et min.


10
2017-07-06 10:52



Pas HTML5, mais pratique quand même: si vous utilisez AngularJS, vous pouvez utiliser ng-minlength pour les entrées et les zones de texte. Voir également ce plunk.


5
2017-09-22 12:04



L'attribut minLength (contrairement à maxLength) n'existe pas nativement en HTML5. Cependant, il existe quelques moyens de valider un champ s'il contient moins de x caractères.

Un exemple est donné en utilisant jQuery sur ce lien: 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>

4
2018-04-23 14:11



Ma solution pour textarea utilisant jQuery et combinant HTML5 requis validation pour vérifier la longueur minimale.

minlength.js

$(document).ready(function(){
  $('form textarea[minlength]').on('keyup', function(){
    e_len = $(this).val().trim().length
    e_min_len = Number($(this).attr('minlength'))
    message = e_min_len <= e_len ? '' : e_min_len + ' characters minimum'
    this.setCustomValidity(message)
  })
})

HTML

<form action="">
  <textarea name="test_min_length" id="" cols="30" rows="10" minlength="10"></textarea>
</form>

3
2018-01-13 17:47