如何基于react js中触发的Change事件检查密码条件的多个验证

Question

这是我需要检查验证类型匹配的输入

 lowerCase = (str) => { return /[az]/g.test(str); }; upperCase = (str) => { return /[AZ]/g.test(str); }; isNumber = (str) => { var regex = /\\d+/g; return regex.test(str); }; islength = (str) => { return str.length > 2 ? true : false; }; validationRules = (param) => { console.log("password", param); if (this.islength(param)) { this.setState({ charLength: true }); } else if (this.lowerCase(param)) { this.setState({ loweCase: true }); } else if (this.upperCase(param)) { this.setState({ upperCase: true }); } else if (this.isNumber(param)) { debugger; this.setState({ number: true }); } else { this.setState({ charLength: false, lowerCase: false, upperCase: false, number: false, }); } };

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.3.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.3.1/umd/react-dom.production.min.js"></script> <input type="password" className="form-control custom_input" onChange={(e)=> this.validationRules(e.target.value)}/> <div className="validation_rules"> <p className="password_header mb-2"> Your password must have </p> <ul> <li className={ !this.state.charLength ? "d-flex rules_invalid" : "d-flex rules_valid" }> 8 or more characters </li> <li className={ !this.state.loweCase ? "d-flex rules_invalid" : "d-flex rules_valid" }> One lowercase letter </li> <li className={ !this.state.upperCase ? "d-flex rules_invalid" : "d-flex rules_valid" }> One Uppercase letter </li> <li className={ !this.state.number ? "d-flex rules_invalid" : "d-flex rules_valid" }> One number </li> </ul> </div>

这里的规则应该基于 this.validationRules() 突出显示我同意我的逻辑是错误的任何人都可以帮助我正确的逻辑并且没有css问题如果您遇到任何请忽略它

Answer 1

您可以将计算每个验证步骤并将状态设置为一个语句的步骤组合起来：

validationRules = (param) => {
  console.log("password", param);
  this.setState({
    charLength: this.islength(param),
    lowerCase: this.lowerCase(param),
    upperCase: this.upperCase(param),
    number: this.isNumber(param),
  });
};

编辑：也仅供参考， return str.length > 2 ? true : false; return str.length > 2 ? true : false; 可以缩短以return str.length > 2;