我正在尝试验证密码字段,以便在验证失败时显示警报
这是我到目前为止尝试过的方法,但它不起作用。任何帮助都是非常感谢的。
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:
<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')
);我想要的是,当用户单击提交时,如果验证失败,将弹出一个警告框。
发布于 2017-02-06 13:39:17
不确定您使用的regex,所以使用了一个只接受upper case characters的简单sure。您已经在使用onChange方法,因此不需要对validation使用单独的method,请使用此onChange方法,该方法将首先检查pass是否有效,然后只设置state值:
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');
}
}检查此jsfiddle:https://jsfiddle.net/6q53prks/
如果你需要任何帮助,请告诉我。
https://stackoverflow.com/questions/42060640
复制相似问题