Verständnisfrage zu Regex in JS und HTML

[Gunnar Bittersmann]

@@Nico R.

um Regex habe ich mich immer gedrückt, jetzt brauche ich aber doch mal einen. Ich habe diesen hier gefunden, der in meinem Formular dafür sorgt, dass nur Beträge mit bis zu drei Ziffern, Punkt oder Komma und drei Nachkommastellen eingegeben werden dürfen:

<input type="text" pattern="[0-9]{0,3}[.|,]{0,}[0-9]{1,2}" title="Bitte nur Ziffern sowie , oder . angeben" >

Das funktioniert genau wie es soll.

Nein. Einen Fehler hast du selbst schon gefunden: 1234 geht durch, obwohl es nicht sollte.

Ein anderer Fehler ist, dass 0,123 nicht passt, obwohl es sollte.

---

Der Hinweis „Bitte nur Ziffern sowie , oder . angeben“ gehört angezeigt, nicht in ein Tooltip versteckt und damit nur einigen Nutzern zugänglich:

<label for="input">Eingabe</label>
<p id="hint">Bitte nur Ziffern sowie , oder . angeben</p>
<input id="input" aria-describedby="hint" pattern="…"/>

Aber wenn das Eingabefeld nur für Zahlen ist, sollte es auch den entsprechenden Typ haben, womit Nutzer von virtuellen Keyboards auch nur Ziffern und Dezimaltrennzeichen (evtl. auch Minus) vorgesetzt bekommen:

<label for="input">Eingabe</label>
<p id="hint">Bitte nur Ziffern sowie , oder . angeben</p>
<input id="input" aria-describedby="hint" type="number" pattern="…"/>

---

let text = "b1";
let pattern = /([0-9]{0,3}[.|,]{0,}[0-9]{1,2})/;
let result = pattern.test(text);

Statt let sollte hier überall const stehen.

---

<p id="demo"></p>

document.getElementById("demo").textContent = result;

Für Ausgaben ist das output-Element da.

🖖 Живіть довго і процвітайте