Dynamische Formularvalidierung in reactjs mit json Daten

Question

ich unter json habe mit allen Feldeigenschaften darin

const BILL_NUMBER = [ 
{ 
    "caseIndex": "Bill Number", 
    "minLength":"3", 
    "maxLength": "16", 
    "htmlControlType": "text", 
    "errorMessage": "Alphanumeric Only", 
    "idxReglrExp":"^[a-zA-Z0-9_\\s]*$", 
    "cssClassName":"form-control" 
} 
]; 

unten ist die Funktion, die JSON-Daten und das Feld zu machen ist in der Seite

angezeigt bekommen

renderBillNumber: function() { 

    const data = BILL_NUMBER; 
    return data.map(group => { 
     return <div> 
       <label for="billnumber">{group.caseIndex}</label> 
            <input type={group.htmlControlType} className={group.cssClassName} id="billnumber" placeholder=""/> 
            </div> 
    }); 

}, 

Ich möchte dieses Feld mit den Eigenschaften aus dem JSON wie minlength, maxlength validieren und eine Fehlermeldung basierend auf der Regex anzeigen.

Kann mir jemand helfen, wie dies in reactjs zu tun?

Answer 1

Sie benötigen einen onChange Eigenschaft hinzufügen, die die Prüfung für Sie tun:

renderBillNumber: function() { 
    const data = BILL_NUMBER; 
    return data.map(group => 
    <div> 
     <label for="billnumber">{group.caseIndex}</label> 
     <input 
     onChange={(e) => this.handleChange(e, group)} 
     type={group.htmlControlType} 
     className={group.cssClassName} 
     /> 
    </div> 
    }); 
}, 
handleChange(event, group) { 
    const value = event.target.value; 
    if (value.length < group.minLength) { 
    // do what you want to do if value is too small 
    } 
    // all you want to check 
} 

Answer 2

Um dies zu tun, müssen Sie den Status jedes Ihrer Eingaben verfolgen. Wenn die Idee hier ist, dass Sie eine Menge an Rechnungsnummern in Ihrem JSON haben, dann macht es vielleicht Sinn, nur diejenigen zu verfolgen, die Fehler in Ihrem Status haben.

Sie könnten zunächst eine Prüf-Funktion wie so erstellen:

validateText(evt){ 
// Get the current user input for this input box 
const userInput = evt.target.value; 

// Grab the current errors state 
const errors = this.state.errors || {}; 

// Cycle through your JSON to get the data you need 
BILL_NUMBER.forEach(bill => { 

    // If this is the right bill, then get the validation data we need. 
    if (bill.caseIndex === evt.target.name){ 
     const minLength = bill.minLength; 
     const maxLength = bill.maxLength; 
     const re = bill.idxReglrExp; 
     if (userInput.length >= minLength && 
      userInput.length <= maxLength && 
      userInput.match(re)){ 
       //We're valid - cycle through state & remove error if it's there. 
     } else { 
      // Add this caseIndex to your state: 
      this.setState({ 
       errors: { 
        ...errors, 
        bill.caseIndex: true 
       } 
      }); 
     } 
    } 
}); 

},

Dann können Sie Ihre renderBillNumber Funktion bearbeiten, so dass Ihre Funktion, wenn der Benutzer Text genannt wird. Sie können auch entweder ein "name" -Attribut hinzufügen, das auf Ihre Eingabe verweist, oder ähnlich assign a ref.

renderBillNumber: function() { 

const data = BILL_NUMBER; 
return data.map(group => { 
    if (this.state.errors[caseIndex]){ 
     return (
      <div>error</div> 
     ); 
    } 
    return (
     <div> 
      <label for="billnumber">{group.caseIndex}</label> 
      <input name={group.caseIndex} onInput={this.validateText} type={group.htmlControlType} className={group.cssClassName} id="billnumber" placeholder=""/> 
     </div> 
    ) 
}); 

}

Damit wird ValidateText aufgerufen werden, wenn der Benutzer etwas eingibt. Wenn der Status geändert wird, werden Ihre Rechnungen mit den entsprechenden Grafiken neu gerendert.