javascript - 如何根据在反应 js 中触发的更改事件检查密码条件的多个验证

Question

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

lowerCase = (str) => {
  return /[a-z]/g.test(str);
};
upperCase = (str) => {
  return /[A-Z]/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() 突出显示规则并且我同意我的逻辑是错误的，任何人都可以帮助我正确的逻辑，如果您遇到任何问题，请忽略它

标签： javascripthtmlreactjs

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;