react表单密码验证

迈不过友情╰ 2022-02-13 15:55 371阅读 0赞

*  表单验证：验证密码强度（通过组件方法，但是不够灵活，只限于简单使用）

import React, { Component } from "react";
    import "./App.css"
    import ReactPasswordStrength from 'react-password-strength';
    class App extends Component {
      render() {
        return (
          <ReactPasswordStrength
            minLength={5}
            minScore={2}
            scoreWords={['weak', 'okay', 'good', 'strong', 'stronger']}
            inputProps={
       { name: "password_input", autoComplete: "off", className: "form-control" }}
          />
        );
      }
    }
    export default App;

*  js方法验证

*  在react中判断

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70][]

密码中要求有大写字母，小写字母，数字，长度大于8，特殊符号这几个要求，没有满足的话，出现红色提示

只有密码满足要求，下方的confirm password才可输入密码。

confirm password密码匹配成功，图标变为绿色，CHANGE按钮变为绿色，才可修改密码

点击密码输入框内右侧的眼睛图标，可以显示隐藏密码

import React, { Component } from "react";
    import "./App.css"
    import { Icon, Input, Button } from "semantic-ui-react";
    import "semantic-ui-css/semantic.min.css";
    function isSimplePwd(s) {
      if (s.length < 8) {
        return 0;
      }
      var ls = 0;
      if (s.length >= 8) {
        ls++;
      }
      if (s.match(/([a-z])+/)) {
        ls++;
      }
      if (s.match(/([0-9])+/)) {
        ls++;
      }
      if (s.match(/([A-Z])+/)) {
        ls++;
      }
      if (s.match(/[^a-zA-Z0-9]+/)) {
        ls++;
      }
      return ls;
    }
    function isLowletter(a) {
      if (a.match(/([a-z])+/)) {
        return true;
      } else {
        return false;
      }
    }
    function isUpperletter(a) {
      if (a.match(/([A-Z])+/)) {
        return true;
      } else {
        return false;
      }
    }
    function isNum(a) {
      if (a.match(/([0-9])+/)) {
        return true;
      } else {
        return false;
      }
    }
    function isSpecial(a) {
      if (a.match(/[^a-zA-Z0-9]+/)) {
        return true;
      } else {
        return false;
      }
    }
    class App extends Component {
      constructor(props) {
        super(props);
        this.state = {
          showPassword: false,
          showConfirmPassword: false,
          firstPassword: false,
          focusConfirmPwd: false,
          pwdCorrect: false,
          newPwd: "",
          confPwd: ""
        };
        this.change = this.change.bind(this);
        this.handleInputChangePwd = this.handleInputChangePwd.bind(this);
        this.changeShowPassword = this.changeShowPassword.bind(this);
        this.changeShowConfirmPassword = this.changeShowConfirmPassword.bind(this);
        this.handleInputChangeConPwd = this.handleInputChangeConPwd.bind(this);
      }
      changeShowPassword() {
        this.setState({ showPassword: !this.state.showPassword });
      }
      changeShowConfirmPassword() {
        this.setState({ showConfirmPassword: !this.state.showConfirmPassword });
      }
      handleInputChangePwd(event) {
        this.setState({
          firstPassword: true,
          newPwd: event.target.value
        });
        console.log("newPwd", event.target.value);
      }
      handleInputChangeConPwd(event) {
        this.setState({
          confPwd: event.target.value
        });
        console.log("confPwd", event.target.value);
      }
    
      change() {
        const password = this.state.newPwd;
        console.log("password",password)
      }
      render() {
        return (
          <div id="box">
            <div className="totalBox">
              <div className="resetPassBox">
                <p className="leftLabel">New Password</p>
                <Input
                  placeholder="New Password"
                  type={this.state.showPassword ? "text" : "password"}
                  key="password"
                  name="password"
                  onChange={this.handleInputChangePwd}
                  id="centerLabel"
                />
                <div className="clearFloat" />
                <Icon
                  as="i"
                  name={this.state.showPassword ? "eye slash" : "eye"}
                  onClick={this.changeShowPassword}
                  id="centerIcon"
                />
              </div>
              <div className="iconBoxTotal">
                <Icon
                  as="i"
                  name="check"
                  id="checkIcon"
                  color={isSimplePwd(this.state.newPwd) === 5 ? "green" : "red"}
                />
                <span
                  className="errorTip"
                  style={
       {
                    color: "red",
                    display:
                      isSimplePwd(this.state.newPwd) === 5
                        ? "none"
                        : "inline-block"
                  }}
                >
                  {this.state.newPwd.length < 8
                    ? "Minimum length is 8"
                    : isLowletter(this.state.newPwd) === false
                      ? "Require lowercase letters"
                      : isNum(this.state.newPwd) === false
                        ? "Require numbers"
                        : isUpperletter(this.state.newPwd) === false
                          ? "Require uppercase letters"
                          : isSpecial(this.state.newPwd) === false
                            ? "Require special character"
                            : "OK"}
                </span>
                <div className="clearFloat" />
              </div>
              <div className="clearFloat" />
            </div>
            <div className="totalBox">
              <div className="resetPassBox">
                <p className="leftLabel">Confirm Password</p>
                {isSimplePwd(this.state.newPwd) === 5 ? (
                  <Input
                    placeholder="Confirm Password"
                    type={this.state.showConfirmPassword ? "text" : "password"}
                    key="password"
                    name="password"
                    onChange={this.handleInputChangeConPwd}
                    id="centerLabelConfirm"
                  />
                ) : (
                    <Input
                      placeholder="Confirm Password"
                      type={this.state.showConfirmPassword ? "text" : "password"}
                      key="password"
                      name="password"
                      onChange={this.handleInputChangeConPwd}
                      id="centerLabelConfirm"
                      disabled
                    />
                  )}
                <div className="clearFloat" />
                <Icon
                  as="i"
                  name={this.state.showConfirmPassword ? "eye slash" : "eye"}
                  onClick={this.changeShowConfirmPassword}
                  id="centerIconConfirm"
                />
              </div>
              <div className="iconBoxTotal">
                <Icon
                  as="i"
                  name="check"
                  id="checkIconConfirm"
                  color={
                    this.state.newPwd === this.state.confPwd &&
                      isSimplePwd(this.state.newPwd) === 5
                      ? "green"
                      : "grey"
                  }
                />
                <span
                  className="matchTip"
                  style={
       {
                    display:
                      this.state.newPwd === this.state.confPwd &&
                        isSimplePwd(this.state.newPwd) === 5
                        ? "inline-block"
                        : "none"
                  }}
                >
                  Match
                  </span>
              </div>
              <div className="clearFloat" />
            </div>
            {this.state.newPwd === this.state.confPwd ? (
              <Button onClick={this.change} color="green">
                Change
                  </Button>
            ) : (
                <Button onClick={this.change} disabled>
                  Change
                  </Button>
              )}
          </div>
        );
      }
    }
    export default App;

完整代码，请点击链接下载：[https://download.csdn.net/download/qq\_37815596/11150884][https_download.csdn.net_download_qq_37815596_11150884]，下载代码之后，npm install，再npm start即可使用

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70]: /images/20220213/fc1840031a0c46858bcf77e34ca93e33.png
[https_download.csdn.net_download_qq_37815596_11150884]: https://download.csdn.net/download/qq_37815596/11150884