Welcome aboard! We are happy you are here and wish you good net-raft!
<!DOCTYPE html>
<html>
<head>
<script src="https://fb.me/react-0.14.3.min.js"></script>
<script src="https://fb.me/react-dom-0.14.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
</head>
<body>
<script type="text/babel">
class App extends React.Component {
constructor(props) {
super(props);
this.state = {value: '',data: []};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
var enoughRegex = new RegExp("(?=.{6,}).*", "g");
var text;
if (false == enoughRegex.test(this.state.value)) {
text = 'More Characters';
} else if (strongRegex.test(this.state.value)) {
text = 'Strong!';
} else if (mediumRegex.test(this.state.value)) {
text = 'Medium!';
} else {
text = 'Weak!';
}
this.setState({data: text})
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Your password:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<button>submit</button>
<h2>{this.state.data}</h2>
</form>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('app')
)
</script>
<div id="app"></div>
</body>
</html>
// you must install npm i react-password-strength-meter
var React = require('react');
var PasswordStrengthMeter = require('react-password-strength-meter');
class App extends React.Component {
constructor(props){
super(props);
this.onChange = this.onChange.bind(this);
}
onChange(event){
}
render() {
return <PasswordStrengthMeter passwordText={"Enter Password"} onChange={this.onChange} />;
}
}
export default App;
The most helpful REACT solutions
How to get client ip address using react ?REACT Click to see more ... 19.2K 421