Die Validierung von Formular-Eingabe-Felder Reagieren

<div className="form-group">
  <label className="col-sm-0 control-label"> Name : &nbsp; </label>
  <input
    type="text"
    value={this.state.UserName}
    onChange={this.handleChangeUserName}
    placeholder="Name"
    pattern="[A-Za-z]{3}"
    className="form-control"
  />
</div>

Hallo, ich versuche zur Validierung eines Formular-input-Feld Reagiert mit pattern-Validierung. Aber es funktioniert nicht. Ich bin mit der Validierung so einfach wie pattern="[A-Za-z]{3}".

Bitte lassen Sie mich wissen, wie diese arbeiten. Putting-Validierung Reagieren Bootstrap-Komponente.

InformationsquelleAutor developer_beginning | 2017-01-30

4

Sind Sie mit der value-Eigenschaft (also die kontrollierte Komponente) von input element und Aktualisierung der Staat in onChange Methode, So können Sie dies leicht testen, regex in onChange und update der Staat nur, wenn die Eingabe gültig wird.

Wie diese:
```
handleChangeUserName(e){
   if(e.target.value.match("^[a-zA-Z ]*$") != null){
       this.setState({UserName: e.target.value});
   }
} 
```
Überprüfen Sie den funktionierenden code:

JS:
```
class HelloWidget extends React.Component {
  
  constructor(){
    super();
    this.state={UserName:''}
    this.handleChangeUserName = this.handleChangeUserName.bind(this);
  }
  
  handleChangeUserName(e){
    if(e.target.value.match("^[a-zA-Z ]*$")!=null) {
      this.setState({UserName: e.target.value});
    }
  }

  render(){
    return(
      <div className="form-group">
        <label className="col-sm-0 control-label" htmlFor="textinput"> Name : &nbsp; </label>
        <input type="text" value={this.state.UserName} onChange={this.handleChangeUserName}  placeholder="Name" className="form-control"></input>
      </div>
    )
  }
}
  
ReactDOM.render(<HelloWidget/>, document.getElementById('container'));
```
HTML:
```
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='container' />
```
Überprüfen Sie die jsfiddle für Arbeit Beispiel: https://jsfiddle.net/uL4fj4qL/11/

Überprüfen Sie diese jsfiddle, Material-Ui snackbar Hinzugefügt, um die Fehler, wenn Benutzer versucht, auf einen falschen Wert eingeben: https://jsfiddle.net/4zqwq1fj/
- Nein, es ist nicht die Validierung für text, die ich Eingangs
- was die Validierung do u want? die regex, die ich verwendet, zu überprüfen, ob Ihr einen Charakter oder nicht, es wird nicht zulassen, Benutzer, um zu schreiben, num. u überprüfen Sie die jsfiddle was ist das Problem dabei?
- hi Ihr arbeitet jetzt für mich, ich hatte einige Fehler in Bezug auf Variablen.
- Kann u pls mir sagen, wie ich hinzufügen popup oder einen Kommentar, wenn Benutzer versucht, geben Sie etwas anderes als Buchstaben ?
- da man sich mit reactjs, kann u verwenden Sie die ehrfürchtige Material-Ui-Komponenten, überprüfen Sie die snackbar, verwenden Sie es für die Anzeige der Fehler: material-ui.com/#/components/snackbar
- überprüfen Sie die aktualisierte Antwort, ich habe eine jsfiddle link, basic snackbar Beispiel, um zu zeigen Sie den Fehler. Lassen Sie mich wissen, wenn u-Notwendigkeit irgendeine Hilfe in dieser. ich denke, jetzt ist es gelöst ur problem, markieren Sie die Antwort als korrekt 🙂
InformationsquelleAutor Mayank Shukla

pattern="[A-Za-z]{3}" ist ein feature von HTML5.

Komplette Lösung hier: https://codepen.io/tkrotoff/pen/qypXWZ?editors=0010

, Wenn Sie nur wollen, verwenden Sie die Standard-HTML5-Validierung:

class FormValidate extends React.Component {
  state = {
    username: ''
  };

  handleUsernameChange = e => {
    console.log('handleUsernameChange()');
    this.setState({
      username: e.target.value
    });
  }

  handleSubmit = e => {
    console.log('handleSubmit() Submit form with state:', this.state);
    e.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <div className="form-group">
          <label htmlFor="username">Name</label>
          <input
            id="username"
            name="username"
            value={this.state.username}
            onChange={this.handleUsernameChange}
            placeholder="Name"
            pattern="[A-Za-z]{3}"
            className="form-control" />
        </div>

        <button className="btn btn-primary">Submit</button>
      </form>
    );
  }
}

Die Validierung von Formular-Eingabe-Felder Reagieren

Wenn Sie wollen, um eine bessere Integration mit Bootstrap 4:

class FormNoValidate extends React.Component {
  state = {
    username: '',
    error: ''
  };

  handleUsernameChange = e => {
    console.log('handleUsernameChange()');
    const target = e.target;
    this.setState({
      username: target.value,
      error: target.validationMessage
    });
  }

  handleSubmit = e => {
    console.log('handleSubmit() Submit form with state:', this.state);
    e.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit} noValidate>
        <div className="form-group">
          <label htmlFor="username">Name</label>
          <input
            id="username"
            name="username"
            value={this.state.username}
            onChange={this.handleUsernameChange}
            placeholder="Name"
            pattern="[A-Za-z]{3}"
            className="form-control" />
          <div className="invalid-feedback d-block">
            {this.state.error}
          </div>
        </div>

        <button className="btn btn-primary">Submit</button>
      </form>
    );
  }
}

Die Validierung von Formular-Eingabe-Felder Reagieren

Wenn Sie wollen mehr (mehr Funktionen, mehr Kontrolle, bessere integration):

Ich geschrieben habe, eine sehr einfache Reagieren Bibliothek zum Umgang mit Formular-Validierung und unterstützt HTML5-Attribute: https://github.com/tkrotoff/react-form-with-constraints

Beispiele hier: https://github.com/tkrotoff/react-form-with-constraints/blob/master/README.md#examples

InformationsquelleAutor tanguy_k

Reagieren mit Haken, wir bauen kundenspezifische Haken, um die Validierung viel einfacher. mit Ihrem Beispiel Schlag. Sie können einfach durch hinzufügen register - Methode reagieren, hook-form: https://github.com/bluebill1049/react-hook-form

import React from 'react';
import useForm from 'react-hook-form';

function Test() {
  const { register, handleSubmit } = useForm();
  const onSubmit = data => console.log(data);

  return {
    <form className="form-group" onSubmit={handleSubmit(onSubmit)}>
      <label className="col-sm-0 control-label"> Name : &nbsp; </label>
        <input
          type="text"
          ref={register}
          placeholder="Name"
          pattern="[A-Za-z]{3}"
          className="form-control"
        /> 
     </div>
  }
}

InformationsquelleAutor Bruce

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.