Reactjs - Form der Eingabevalidierung

Question

Meine Kontaktseite Form wie folgt ist,

<form name="contactform" onSubmit={this.contactSubmit.bind(this)}> 
    <div className="col-md-6"> 
    <fieldset> 
     <input ref="name" type="text" size="30" placeholder="Name"/> 
     <br/> 
     <input refs="email" type="text" size="30" placeholder="Email"/> 
     <br/> 
     <input refs="phone" type="text" size="30" placeholder="Phone"/> 
     <br/> 
     <input refs="address" type="text" size="30" placeholder="Address"/> 
     <br/> 
    </fieldset> 
    </div> 
    <div className="col-md-6"> 
    <fieldset> 
     <textarea refs="message" cols="40" rows="20" 
       className="comments" placeholder="Message"/> 
    </fieldset> 
    </div> 
    <div className="col-md-12"> 
    <fieldset> 
     <button className="btn btn-lg pro" id="submit" 
       value="Submit">Send Message</button> 
    </fieldset> 
    </div> 
</form> 

benötigen Validierung für alle Felder hinzuzufügen. Kann mir jemand helfen, die Validierung in dieser Reaktionsform hinzuzufügen?

Answer 1

Sie sollten Refs vermeiden, können Sie es mit OnChange-Funktion tun. Bei jeder Änderung aktualisieren Sie den Status für das geänderte Feld.

Dann können Sie einfach überprüfen, ob dieses Feld leer ist oder was auch immer Sie wollen.

Sie können etwas tun:

class Test extends React.Component { 
    constructor(props){ 
     super(props); 

     this.state = { 
      fields: {}, 
      errors: {} 
     } 
    } 

    handleValidation(){ 
     let fields = this.state.fields; 
     let errors = {}; 
     let formIsValid = true; 

     //Name 
     if(!fields["name"]){ 
      formIsValid = false; 
      errors["name"] = "Cannot be empty"; 
     } 

     if(typeof fields["name"] !== "undefined"){ 
      if(!fields["name"].match(/^[a-zA-Z]+$/)){ 
       formIsValid = false; 
       errors["name"] = "Only letters"; 
      }   
     } 

     //Email 
     if(!fields["email"]){ 
      formIsValid = false; 
      errors["email"] = "Cannot be empty"; 
     } 

     if(typeof fields["email"] !== "undefined"){ 
      let lastAtPos = fields["email"].lastIndexOf('@'); 
      let lastDotPos = fields["email"].lastIndexOf('.'); 

      if (!(lastAtPos < lastDotPos && lastAtPos > 0 && fields["email"].indexOf('@@') == -1 && lastDotPos > 2 && (fields["email"].length - lastDotPos) > 2)) { 
       formIsValid = false; 
       errors["email"] = "Email is not valid"; 
      } 
     } 



     this.setState({errors: errors}); 
     return formIsValid; 
    } 

    contactSubmit(e){ 
     e.preventDefault(); 
     if(this.handleValidation()){ 
      alert("Form submitted"); 
     }else{ 
      alert("Form has errors.") 
     } 

    } 

    handleChange(field, e){   
     let fields = this.state.fields; 
     fields[field] = e.target.value;   
     this.setState({fields}); 
    } 

    render(){ 
     return (
      <div>   
       <form name="contactform" className="contactform" onSubmit= {this.contactSubmit.bind(this)}> 
        <div className="col-md-6"> 
         <fieldset> 
          <input ref="name" type="text" size="30" placeholder="Name" onChange={this.handleChange.bind(this, "name")} value={this.state.fields["name"]}/> 
          <span style={{color: "red"}}>{this.state.errors["name"]}</span> 
          <br/> 
         <input refs="email" type="text" size="30" placeholder="Email" onChange={this.handleChange.bind(this, "email")} value={this.state.fields["email"]}/> 
         <span style={{color: "red"}}>{this.state.errors["email"]}</span> 
         <br/> 
         <input refs="phone" type="text" size="30" placeholder="Phone" onChange={this.handleChange.bind(this, "phone")} value={this.state.fields["phone"]}/> 
         <br/> 
         <input refs="address" type="text" size="30" placeholder="Address" onChange={this.handleChange.bind(this, "address")} value={this.state.fields["address"]}/> 
         <br/> 
        </fieldset> 
        </div> 

       </form> 
      </div> 
    ) 
    } 
} 

React.render(<Test />, document.getElementById('container')); 

In diesem Beispiel habe ich die Validierung nur für E-Mail und Namen haben, können Sie sich für den Rest tun.

Es gibt vielleicht einen besseren Weg, aber Sie werden die Idee bekommen.

Here is fiddle.

Hoffnung, das hilft.

Answer 2

Nahm Ihren Code und angepasst es mit Bibliothek react-form-with-constraints: https://codepen.io/tkrotoff/pen/LLraZp

const { FormWithConstraints, FieldFeedbacks, FieldFeedback } = ReactFormWithConstraints; 

class Form extends React.Component { 
    constructor(props) { 
    super(props); 

    this.handleChange = this.handleChange.bind(this); 
    this.contactSubmit = this.contactSubmit.bind(this); 
    } 

    handleChange(e) { 
    this.form.validateFields(e.currentTarget); 
    } 

    contactSubmit(e) { 
    e.preventDefault(); 

    this.form.validateFields(); 

    if (!this.form.isValid()) { 
     console.log('form is invalid: do not submit'); 
    } else { 
     console.log('form is valid: submit'); 
    } 
    } 

    render() { 
    return (
     <FormWithConstraints ref={form => this.form = form} onSubmit={this.contactSubmit} noValidate> 

     <div className="col-md-6"> 
      <input name="name" size="30" placeholder="Name" 
       required onChange={this.handleChange}/> 
      <FieldFeedbacks for="name"> 
      <FieldFeedback when="*"/> 
      </FieldFeedbacks> 

      <input type="email" name="email" size="30" placeholder="Email" 
       required onChange={this.handleChange}/> 
      <FieldFeedbacks for="email"> 
      <FieldFeedback when="*"/> 
      </FieldFeedbacks> 

      <input name="phone" size="30" placeholder="Phone" 
       required onChange={this.handleChange}/> 
      <FieldFeedbacks for="phone"> 
      <FieldFeedback when="*"/> 
      </FieldFeedbacks> 

      <input name="address" size="30" placeholder="Address" 
       required onChange={this.handleChange}/> 
      <FieldFeedbacks for="address"> 
      <FieldFeedback when="*"/> 
      </FieldFeedbacks> 
     </div> 

     <div className="col-md-6"> 
      <textarea name="comments" cols="40" rows="20" placeholder="Message" 
        required minLength={5} maxLength={50} 
        onChange={this.handleChange}/> 
      <FieldFeedbacks for="comments"> 
      <FieldFeedback when="*"/> 
      </FieldFeedbacks> 
     </div> 

     <div className="col-md-12"> 
      <button className="btn btn-lg">Send Message</button> 
     </div> 
     </FormWithConstraints> 
    ); 
    } 
} 

const App =() => (
    <div className="container"> 
    <Form /> 
    </div> 
); 

ReactDOM.render(<App />, document.getElementById('app')); 

Screenshot:

Dies ist eine schnelle Hack. Für eine einwandfreie Demo, überprüfen https://github.com/tkrotoff/react-form-with-constraints#examples

Answer 3

einfachste Art und Weise reagieren-validate-von

Installations

npm install react-validate-form 

nicht vergessen zu importieren 'reagieren-validate-Form' zu verwenden ist

import Validate from 'react-validate-form' 

Grundsätzliche Verwendung

<Validate> 
     {({ validate, errorMessages }) => (
     <input onChange={validate} name="first" required /> 
     <p>{errorMessages.first[0]}</p> 
    )} 
</Validate> 

Weitere Details finden sich unter: https://github.com/lonelyplanet/react-validate-form

Answer 4

spät sein könnte zu beantworten - wenn Sie wollen Ihren aktuellen Code ähnlich Validierung haben viel und noch Code der Lage sein, nicht ändern alle Über Ihr Projekt können Sie dieses auch versuchen - https://github.com/vishalvisd/react-validator.