Wie validieren jsx reagiert

Question

I "m versuchen, Passwort-Feld zu validieren eine Warnung angezeigt wird, wenn die Validierung

Hier ist nicht, was ich bisher ausprobiert habe, aber es funktioniert nicht. Jede Hilfe wird sehr geschätzt.

class PasswordForm extends React.Component { 
constructor(props) { 
super(props); 
this.state = {value: ''}; 

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

handleChange(event) { 
this.setState({value: event.target.value}); 
} 

validate(event) { 
var pass = event.target.value; 
var reg = '/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,32}$/'; 
var test = reg.test(pass); 
if (test) { 
    alert('pass'); 
}else{ 
    alert('fail'); 
} 
} 

handleSubmit(event) { 
if(this.state.value.length < 8) { 
    return false; 
} 

alert('A password was submitted that was ' + this.state.value.length + ' characters long.'); 
event.preventDefault(); 
} 

render() { 
return (
    <form onSubmit={this.handleSubmit}> 
    <label> 
     Password:&nbsp; 
     <input type="password" value={this.state.value} onChange={this.handleChange} onInput={this.validate}/> 
    </label> 
    <input type="submit" value="Submit" /> 
    </form> 
); 
} 
} 

ReactDOM.render(
<PasswordForm />, 
document.getElementById('root') 
); 

Was ich will, ist, wenn der Benutzer auf ein Warnfeld erscheint klickt einreichen, wenn die Validierung fehlschlägt.

Answer 1

Nicht sicher die regex Sie verwendet wird, verwendet, um eine einfache, die upper case characters nur akzeptieren. Sie sind bereits Verwendung der onChange Verfahren, so dass ein separater method für validation Verwendung nicht erforderlich ist, verwenden Sie diese onChange Methode, die zuerst überprüft, ob pass gültig ist oder nicht, dann setzen nur den state Wert:

handleChange(event) { 
     var pass = event.target.value; 
     var reg = /^[A-Z]*$/; 
     var test = reg.test(pass); 
     if (test) { 
      alert('pass'); 
      this.setState({value: pass}); 
     }else{ 
     alert('fail'); 
     }   
    } 

prüfen diese jsfiddle: https://jsfiddle.net/6q53prks/

Lassen Sie mich wissen, wenn Sie Hilfe benötigen.

Answer 2

vielleicht dieses https://codepen.io/dagman/pen/wgXRyZ

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

    this.state = {value: ''}; 

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

    handleChange(event) { 
     this.setState({ 
      value: event.target.value 
     }); 
    } 

    handleSubmit(event) { 
     event.preventDefault(); 

     const { value } = this.state; 
     const re = new RegExp("^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,32}$"); 
     const isOk = re.test(value); 

     console.log(isOk); 

     if(!isOk) { 
      return alert('weak!'); 
     } 

     alert('A password was submitted that was ' + value.length + ' characters long.'); 
    } 

    render() { 
     return (
      <form onSubmit={this.handleSubmit}> 
       <label> 
        Password:&nbsp; 
        <input type="password" value={this.state.value} onChange={this.handleChange} /> 
       </label> 
       <input type="submit" value="Submit" /> 
      </form> 
     ); 
    } 
} 

ReactDOM.render(
    <PasswordForm />, 
    document.getElementById('root') 
);