react表单密码验证

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

import React, { Component } from "react";
import "./App.css"
import ReactPasswordStrength from 'react-password-strength';
class App extends Component {
  render() {
    return (
      
    );
  }
}
export default App;

• js方法验证

• 在react中判断

密码中要求有大写字母，小写字母，数字，长度大于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 (
      

        

          

            
New Password
            
            

            
          
          

            
            
              {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"}
            
            

          
          

        
        

          

            
Confirm Password
            {isSimplePwd(this.state.newPwd) === 5 ? (
              
            ) : (
                
              )}
            

            
          
          

            
            
              Match
              
          
          

        
        {this.state.newPwd === this.state.confPwd ? (
          
            Change
              
        ) : (
            
              Change
              
          )}
      
    );
  }
}
export default App;

完整代码，请点击链接下载：https://download.csdn.net/download/qq_37815596/11150884，下载代码之后，npm install，再npm start即可使用