react-password-checker/src/ReactPasswordChecker.js

react-password-checker

var React = require('react');

var ReactPasswordChecker = React.createClass({
  getInitialState () {
    return {
      validationMessage: ''
    }
  },
  checkPassword (event) {
    var input = event.target.value;
    var matchPassword = /^[a-zA-Z0-9_-]{6,18}$/;
    if (matchPassword.test(input)) {
      this.setState({validationMessage: "Your password is valid"})
    } else {
      this.setState({validationMessage: "Your password needs to be 6-18 characters and contain at least a lowercase letter (a-z), number (0-9), an underscore, or a hyphen"})    
    }
  },
	render () {
		return (
      <div>
        <input type='text' placeholder='Check your password' onChange={this.checkPassword} />
        {this.state.validationMessage !== '' ? this.state.validationMessage : ''}
      </div>
    )
	}
});

export default ReactPasswordChecker;