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.
8 Antworten
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
Sie können auch string.length
yup.string().length(5)
Bei Zahlen, die mit Nullen beginnen, funktioniert dies jedoch nicht:
const yup = require('yup')
const schema = yup.string().length(5)
console.log(schema.isValidSync(12345)) //(true) This is valid.
console.log(schema.isValidSync(00123)) // (false) This is NOT valid.
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)
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
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 )
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')
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.
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!')