React-Formular-Validierung

In unserer Zeit speichern, pflegen und analysieren die Unternehmen die Daten für viele verschiedene Zwecke.

Ob es um die Pflege einer Benutzerdatenbank, das Erstellen von Berichten oder etwas anderes geht, die Rolle von Daten kann nicht genug betont werden. Daher müssen Daten strukturiert und gut organisiert sein.

Webanwendungen, die mit React betrieben werden, müssen die Formularvalidierung verwenden, um sicherzustellen, dass die Benutzereingaben den Standardkonventionen entsprechen. Auf diese Weise können Sie die Benutzerreise erleichtern und die Daten auf organisierte Weise sammeln.

Eine schlechte Datenvalidierung kann auch zu böswilligen Angriffen führen, sodass die Implementierung geeigneter Lösungen auch die Sicherheit Ihrer Anwendungen erhöhen kann.

React-Formular-Validierung

Für ordnungsgemäße React-Anwendungen ist die Formularvalidierung eine wesentliche Funktion. Eine E-Mail muss beispielsweise das Zeichen @, ein gültiges Suffix enthalten und andere Kriterien erfüllen.

onChange-Ereignis

Der effizienteste Weg, die Formularvalidierung in React zu implementieren, besteht darin, auf onChange-Ereignisse zu lauschen und Benutzereingaben im state Ihrer Komponente zu halten. Zuerst müssen Sie über kontrollierte Eingaben verfügen. Wenn Sie also zwei Felder zum Validieren haben (z. B. Name und E-Mail), müssen Sie den Status mit den folgenden leeren Werten initialisieren:

constructor(props){
    super(props)
    this.state = {
    inputFields: {"name": "", "email": ""},
    errorMessages: {}
  }
}

Beim Schreiben von Klassenkomponenten muss der Zustand in der Funktion constructor() initialisiert werden. Es ist auch gut, eine errorMessages-Eigenschaft zu haben, in der Sie die Nachrichten speichern können, um den Benutzern mitzuteilen, was mit den eingegebenen Werten nicht stimmt.

Der erste Schritt bei der Formularvalidierung sollte darin bestehen, <input>-Elemente mit onChange-Ereignislistenern einzurichten. Die Änderungen in den Eingabefeldern spiegeln sich automatisch auch im Status wider.

Unsere Methode render() sollte so aussehen:

render() {
    return (
    <form>
    <input type="text" onChange={(e) => this.setState({inputFields: {"name": e.target.value, "email": this.state.inputFields.email}})} />
    <br />
    <input type="text" onChange={(e) => this.setState({inputFields: {"name": this.state.inputFields.name,"email": e.target.value, }})}/>
    </form>
    )
  }

Dies ist ein großartiger Anfang; dennoch müssen wir Bedingungen für die Formularvalidierung einrichten und Fehlermeldungen generieren. Dafür erstellen wir eine benutzerdefinierte Funktion validate().

Der Einfachheit halber stellen wir zwei Grundregeln auf: Der Name sollte länger als 2 Buchstaben sein und der E-Mail-Wert sollte @ enthalten. Nun sollte unsere gesamte Anwendung in etwa so aussehen:

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
    inputFields: {"name": "", "email": ""},
    errorMessages: {}
  }
}
  render() {
    console.log(this.state)
    const validate = () => {
      let inputFields = this.state.inputFields
      let errors = {}
      let validityStatus = true
      if (inputFields["name"].length <= 2){
        validityStatus = false
        errors["name"] = "The name should contain more than two symbols"
      }
      if (inputFields["email"].indexOf("@") === -1 ){
        validityStatus = false
        errors["email"] = "The email should contain @"
      }
      this.setState({errorMessages: errors})
      return validityStatus
    }
    const handleSubmit = (e) => {
      e.preventDefault();
      if (validate()){
        alert("form complete")
      }
      else {
        alert("errors")
      }
    }
    return (
    <form onSubmit={(e) => handleSubmit(e)}>
    <input type="text" onChange={(e) => this.setState({inputFields: {"name": e.target.value, "email": this.state.inputFields.email}})} />
    <br />
    <input type="text" onChange={(e) => this.setState({inputFields: {"name": this.state.inputFields.name,"email": e.target.value, }})}/>
    <br />
    <button type="submit">Submit</button>
    </form>
    )
  }
}

Nach dem Absenden des Formulars überprüft unsere Funktion validate() die in die Felder eingegebenen Werte und gibt true zurück, wenn alle Bedingungen erfüllt sind, und false, wenn sie nicht erfüllt sind. Sobald die Prüfung abgeschlossen ist, meldet die Funktion handleSubmit() entweder form complete oder errors.

Die Funktion enthält auch lokal die Variable errors, in der die Warnmeldungen für jedes Textfeld gespeichert werden. Sobald die Prüfung abgeschlossen ist, verweist sie auf die Variable, um die Zustandseigenschaft errorMessages zu aktualisieren.

Der Einfachheit halber können Sie unter jedem Feld einen Text hinzufügen, der die Fehlermeldung für dieses Feld anzeigt. Hier ist ein Beispiel:

return (
    <form onSubmit={(e) => handleSubmit(e)}>
    <input type="text" onChange={(e) => this.setState({inputFields: {"name": e.target.value, "email": this.state.inputFields.email}})} />
    <p style={{color: "red"}}>{this.state.errorMessages.name}</p>
    <br />
    <input type="text" onChange={(e) => this.setState({inputFields: {"name": this.state.inputFields.name,"email": e.target.value, }})}/>
    <p style={{color: "red"}}>{this.state.errorMessages.email}</p>
    <br />
    <button type="submit">Submit</button>
    </form>
    )

Auf diese Weise können Sie die Warnmeldungen in Ihrer Zustandseigenschaft errorMessages verwenden, um Benutzern hilfreiche kleine Warnungen zur Behebung der Fehler zu geben.