La valeur du champ title = celle du champ pattern

Entier positif, zéro compris

  <form onsubmit="alert('OK !');return false;">
    <fieldset>
      <legend>Nombre entier positif, zéro compris</legend>
      <p>Pattern = [0-9]+< /br>
        <input type="text" pattern="[0-9]+" placeholder="nombre entier positif" title="[0-9]+"
        required="required" /> <input type="submit" /> <input type="reset" />
      </p>
    </fieldset>
  </form>

Utilisez l'attribut global title avec comme valeur l'expression régulière pour aider l'utilisateur.

Les fait d'inclure le champ dans un formulaire, un attribut onsubmit et un bouton de type="submit" permet de bénéficier de la validation HTML, faite automatiquement par le navigateur. Ici, la contrainte required="required" sera donc testée, ainsi que la contrainte pattern="...".

Toutefois, les expressions régulières les plus sûres sont celles qu'on ne crée pas !. Les expressions régulières doivent être utilisées qu'en dernier recours, avec un type="text", c'est-à-dire lorsque le type de données est quelconque. Ici, pour les données de type nombre, on utilisera le type="number"

<input type="number" placeholder="nombre entier positif" required="required"
min="0" /> <input type="submit" /> <input type="reset" />

Le code est plus court et surtout plus sûr !

Ici, +9 est un nombre valide. L'expression régulière utilisée dans le formumaire précédent, [0-9]+, était presque bonne.

Entier positif, supérieur à zéro

<input type="number" placeholder="nombre entier positif"
required="required" min="1" /> <input type="submit" /> <input type="reset" />

Si on ajoute la contrainte min, il faut veiller à ce que le type de données puisse avoir un minimum. Si type="text" avait été maintenu avec le pattern="[0-9]+", zéro aurait été admis !

Entier positif, zéro compris, inférieur à ...

<input type="number" required="required" min="0" max="999"

On sera attentif au fait que la valeur des contraintes min et max est comprise.

Ici, on aurait pu remplacer la contrainte max avec le pattern suivant : [0-9]{1,3}
Toutefois, la contrainte max permet de limiter facilement à, par exemple, 724.

Entre deux nombres entiers

<input type="number" required="required" min="-456" max="789"

Entre deux nombres décimaux

<input type="number" required="required" min="-456.27" max="1789.19" step="0.01"

Le nombre de décimales autorisées est indiqué via l'attribut step. step="0.001" autorisera les nombres à trois décimales

La valeur des contraintes min, max et step ne peut pas contenir de virgule décimale.

Avec virgule décimale

Si le développeur souhaite autoriser la virgule décimale, il pourrait ajouter un peu de code JavaScript pour remplacer automatiquement la virgule en point.

Nombre entre -456,27 (compris) et +1789,19 (compris)

Google Chrome (63et+) accepte la frappe du point et de la virgule
Opera (49et+) accepte la frappe du point et de la virgule
Firefox (57et+) n'accepte que la frappe de la virgule
Microsoft (Edge (38et-) et IE (11et-)) n'acceptent que la frappe du point

Ce script qui remplace la virgule par un point, fonctionne avec Google Chrome (63et+) et Microsoft (Edge (38et-) et IE (11et-)) mais pas avec Opera (49et+) qui autorise la frappe de la virgule, mais qui interdit le remplacement de la virgule par un point, ni Firefox (57et+) qui interdit la frappe du point et interdit le remplacement par un point)

<input type="number" required="required" min="-456.27" max="1789.19" step="0.01" onkeyup="virguleToPoint(this);"

Avec comme fonction, par exemple :

function virguleToPoint(x){

  x.setAttribute("type","text");
  x.value=x.value.replace(',','.');
  x.setAttribute("type","number");

}

Le this employé dans l'appel de la fonction est un mot-clé de JavaScript qui signifie l'objet lui-même. L'objet qui lance l'appel de la fonction est la balise <input />. Dans la fonction, x représente donc cette balise. Pour modifier la valeur de son attribut value, il faut préalablement modifier la valeur de son attribut type en "text" ! Après, avoir remplacé la virgule par un point, il faut remettre la valeur de son attribut type en "number" pour bénéficier à nouveau de la validation HTML.

L'événement keyup survient à chaque fois que la touche est relâchée. Si le nombre est composé de 6 caractères, la fonction sera appelée 6 fois.

Cela fonctionne aussi si l'utilisateur utilise directement le point décimal. Bref, cela fonctionne dans tous les cas.

Mot français

Voir : Alphabet français

  <input required="required" pattern="[A-Za-zàâçéèêëîïôùûüÿæœÀÂÇÉÈÊËÎÏÔÙÛÜŸÆŒ]+" />

NOM

Les champs NOM et Prénom doivent accepter les caractères alphabétiques + espace, trait d'union, apostrophe. Le champ NOM doit, de plus, interdire les minuscules. Dans le champ Prénom la première lettre de chaque mot doit être en majuscule. Enfin, le nom et prénom sont limités (arbitrairement) de 2 à 20 caractères.

En France, les noms de famille varie de 1 à 44 lettres. Toutefois, les noms de famille de plus de 20 caractères sont rares.

Si le nom doit être stocké dans une base de données, 20 caractères est une taille raisonnable. Il faut tenir compte des signes diacritiques et des deux ligatures (Circulaire du 23 juillet 2014 relative à l'État civil). Rappelons que "Latin-1" ne contient pas les lettres : œ, Œ et Ÿ. "Latin-15" est acceptable, mais finalement "UTF-8" est donc recommandé.

Code HTML

  <input required="" pattern="[A-ZÀÂÇÉÈÊËÎÏÔÙÛÜŸÆŒ \-']{2,20}" />

Code PHP

$nom=mb_strtoupper($nom); /* met en majuscule le nom */

/* NB : L'espace, le trait d'union et l'apostrophe sont autorisés */
if ( strlen($nom>0) ){
  $pattern="[A-ZÀÂÇÉÈÊËÎÏÔÙÛÜŸÆŒ \-']{2,20}";
  if (!preg_match($pattern,$nom )){
    die("ERREUR : Votre nom doit avoir de 2 à 20 caractères
     et ne contenir que les caractères suivants :<br>$pattern");
  }
}

E-mail

Code HTML

  <input type="email" required="" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" />

pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" devrait être placé dans un input même s'il est de type="email", pour éviter la "permissivité" des navigateurs.

Code PHP

if ( strlen($expediteurEmail>0) && !filter_var($expediteurEmail, FILTER_VALIDATE_EMAIL) ) {
  die("ERREUR : Votre adresse e-mail n'est pas valide.");
}

La fonction PHP filter_var() est plus permissif que le pattern utilisé dans le code HTML. Ainsi, selon cette fonction PHP et le navigateur (en l'absence d'un pattern), une adresse e-mail telle que a@b est valide !

URL

Sans pattern, avec seulement type="url", lors de la frappe, le navigateur ne fait que vérifier si la chaîne commence par un protocole valide (http[s]:* ou ftp:*). Ainsi, http:x serait une URL valide ...

Pour des raisons de cohérence, le pattern utilisé dans le formulaire HTML doit être identique à celui utilisé dans le code PHP

Code HTML

  <input type="url" required="" value="http://www."
   pattern="/\b(?:(?:https?|ftp):\/\/|www\.)[-a-z0-9+&@#\/%?=~_|!:,.;]*[-a-z0-9+&@#\/%=~_|]/i" />

Code PHP

if (!preg_match("/\b(?:(?:https?|ftp):\/\/|www\.)[-a-z0-9+&@#\/%?=~_|!:,.;]*[-a-z0-9+&@#\/%=~_|]/i",$website)) {
  $websiteErr = "Invalid URL";

date

La présentation peut varier d'un navigateur à l'autre.

Code HTML

  <input type="date" required="" min="2000-01-01" max="2050-12-31" name="myDate" />

La valeur de la variable $_POST["myDate"] sera au format AAAA-MM-JJ.

time

La présentation peut varier d'un navigateur à l'autre.

Code HTML

  <input type="time" required="" step="1" name="myHour" />

La valeur de la variable $_POST["myHour"] sera au format HH:MM:SS.

Stopper les attaques par injection

Les 5 caractères spéciaux suivants : & " ' < > sont à l'origine de nombreux bugs sur des sites web, lorsqu'ils sont introduits dans le champ d'un formulaire.

  <input required="required" pattern="[^&'>\x22\x3c]+"
  title="5 caractères interdits : & ' > < "" />

\x22 est le code hexadécimal (0x22) du caractère (")
\x3c est le code hexadécimal (0x3c) du caractère (<)

Pour plus d'info : JavaScript RegExp Reference