Gibt es eine yup-Funktion, die eine bestimmte Länge validiert?

Ich habe .min(5) und .max(5) ausprobiert, möchte aber etwas, das sicherstellt, dass die Zahl genau 5 Zeichen (dh Postleitzahl) beträgt.

36
reectrix 17 Apr. 2018 im 23:24

8 Antworten

Beste Antwort

Ich glaube nicht, dass irgendetwas eingebaut ist, aber es ist einfach mit test:

yup.string()
  .test('len', 'Must be exactly 5 characters', val => val.length === 5)

https://runkit.com/tamlyn/5ad9b99a4ba1230012d7ac21

13
Tamlyn 20 Apr. 2018 im 10:08

Die Antwort von @ efru eignet sich hervorragend für Zahlen mit weniger als 22 Zeichen. val.toString().length funktioniert jedoch nicht für Zahlen mit mehr als 22 Zeichen. Der Grund dafür ist, dass größere Zahlen in ein Exponentialformat konvertiert werden, wenn sie in eine Zeichenfolge in Javascript konvertiert werden.

Die Lösung, die am besten funktioniert, ist:

Yup.number (). Test ('len', 'Muss genau 25 Zeichen sein', val => Math.ceil (Math.log10 (val + 1)) === 25)

0
tschumann 24 Jän. 2020 im 00:38

Diese Überprüfung führt zu der besten Validierungserfahrung:

Yup.string()
.required()
.matches(/^[0-9]+$/, "Must be only digits")
.min(5, 'Must be exactly 5 digits')
.max(5, 'Must be exactly 5 digits')

Ausgabe:

12f1    // Must be only digits
123     // Must be exactly 5 digits
123456  // Must be exactly 5 digits
01234   // valid
11106   // valid

Demo: https://codesandbox.io/s/yup-y6uph

1
SimoAmi 21 Feb. 2020 im 20:15

Um die anderen Antworten zu ergänzen, überprüft keiner von ihnen, ob ein Wert vorhanden ist (ich sehe, dass einige dies in Kommentaren erwähnt haben, nachdem sie dies gepostet haben) ...

Wenn es nicht vorhanden ist und das Feld leer bleibt, wird versucht, die Länge von undefined oder null zu ermitteln. Dies führt dann zu einem Javascript-Fehler und verhindert andere Bedingungen wie {{X2} } von der Arbeit (wenn Sie es wie natürlich eingerichtet hatten).

Das wäre wahrscheinlich etwas besser:

// Check we have a value as well
Yup.number().test('len', 'Must be exactly 5 characters', val => val && val.toString().length === 5 )
1
Matt Royal 29 Aug. 2019 im 13:36

Die Antwort von @ Tamlyn deckt den Aspekt der Längenvalidierung der Frage recht gut ab.

Im Falle einer Postleitzahl können Sie einen regulären Ausdruck verwenden, um die Länge und die Begrenzung auf Zahlenwerte innerhalb von Yup.string() zu erzwingen (Sie möchten keinen Yup.number() -Typ verwenden, da Postleitzahlen, die mit einer Null beginnen {{X2) nicht unterstützt werden }})

// ##### format zip code
Yup.string().matches(/^[0-9]{5}$/, 'Must be exactly 5 digits')

// ##### and #####-#### format zip codes
Yup.string().matches(/^[0-9]{5}(?:-[0-9]{4})?$/, 'Must be 5 or 9 digits')
7
dtesta 3 Juli 2019 im 15:01

Wenn Sie später eine Nummer (Postleitzahl) validieren möchten, erfordert die obige Lösung eine geringfügige Änderung. Die Funktion sollte sein:

Yup.number().test('len', 'Must be exactly 5 characters', val => val.toString().length === 5)

.length funktioniert nicht mit Zahlen, sondern nur mit Zeichenfolgen.

12
efru 29 Okt. 2018 im 18:56

Die Test-API stößt auf Probleme mit ReactJs, wenn Ihr Feld keinen Wert hat. Sie können stattdessen die Längen-API verwenden

Yup.string().length(4, 'This field has to be exactly 4 characters!')
1
BoyePanthera 3 März 2020 im 10:29