首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >reactjs中的密码验证

reactjs中的密码验证
EN

Stack Overflow用户
提问于 2017-02-06 13:06:42
回答 2查看 23K关注 0票数 3

我正在尝试验证密码字段,以便在验证失败时显示警报

这是我到目前为止尝试过的方法,但它不起作用。任何帮助都是非常感谢的。

代码语言:javascript
复制
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')
);

我想要的是,当用户单击提交时,如果验证失败,将弹出一个警告框。

EN

Stack Overflow用户

回答已采纳

发布于 2017-02-06 13:39:17

不确定您使用的regex,所以使用了一个只接受upper case characters的简单sure。您已经在使用onChange方法,因此不需要对validation使用单独的method,请使用此onChange方法,该方法将首先检查pass是否有效,然后只设置state值:

代码语言:javascript
复制
 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');
       }        
  }

检查此jsfiddlehttps://jsfiddle.net/6q53prks/

如果你需要任何帮助,请告诉我。

票数 2
EN
查看全部 2 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/42060640

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档