CREATING PASSWORD VALIDATION/CHECKLIST IN REACT.JS
Tags: javascript, frontend, webdev, react
Published: 2023-05-18 05:12:59

One of your responsibilities as a developer is making sure your users create a strong password to secure their account,

_And this can be achieved by adding some checklist and visual validation while they are creating their password._

In these few steps, I will explain how you can create a simple password checklist with regular expressions.

## STEP 1
**Outline the checklists;**
In this post we will be checking for

- has uppercase
- has lowercase
- has special characters
- has number
- is greater/equal to 8 characters

## STEP 2
**Create the regular expression to match  the checklists**

```js
  const lowerCase = /[a-z]/g;
  const upperCase = /[A-Z]/g;
  const numbers = /[0-9]/g;
  const specialCharacter = /[-._!"`'#%&,:;<>=@{}~\$\(\)\*\+\/\\\?\[\]\^\|]+/;
```

## STEP 3
**Create an input component for the password**

```js
   export default function PasswordComponent(){

   function passwordValidator(e){
        const enteredPassword = e.target.value
   }

   return (
        <input type='password' placeholder='Enter password' 
               onChange={passwordValidator} />
        )}
```

## STEP 4
**use useState hook to manage input and validity state state**

```js
  export default function PasswordComponent(){
     const [hasLowercase, setHasLowercase] = useState(false)
     const [hasUppercase, setHasUppercase] = useState(false)
     const [hasNumber, setHasNumbe] = useState(false)
     const [hasSpecialCharacter, setHasSpecialCharacter] = 
     useState(false)
     const [passwordIsValid, setPasswordIsValid] = 
     useState(false)

  function passwordValidator(e){
     const enteredPassword = e.target.value
  }

   return (
        <input type='password' placeholder='Enter password' 
              onChange={passwordValidator} />
        )}
```

## STEP 5
**Start matching the entered value with the regular expression**

```js
export default function PasswordComponent(){
     const [hasLowercase, setHasLowercase] = useState(false)
     const [hasUppercase, setHasUppercase] = useState(false)
     const [hasNumber, setHasNumbe] = useState(false)
     const [hasSpecialCharacter, setHasSpecialCharacter] = 
     useState(false)
     const [passwordIsValid, setPasswordIsValid] = 
     useState(false)

function passwordValidator(e){
    const enteredPassword = e.target.value

// check for lower case
    
  if (!new_pass.match(lowerCase))  
          setHasLowercase(false);
          setIsValid(false);
      } else {
          setHasLowercase(true);
          setIsValid(true);
      }

// check for uppercase
    if (enteredPassword.match(upperCase)) {
           setHasUppercase(true);
           setPasswordIsValid(true);
        } else {
            setHasUppercase(false);
            setPasswordIsValid(false);
         }

// check for number
     if (enteredPassword.match(numbers)) {
            setHasNumber(true);
            setPasswordIsValid(true);
         } else {
            setHasNumber(false);
            setPasswordIsValid(false);
         }

// check for 8 or more characters
      if (enteredPassword.length >= 8) {
            setIsEightChar(true);
            setPasswordIsValid(true);
          } else {
            setIsEightChar(false);
            setPasswordIsValid(false);
          }

// check for special character
       if (enteredPassword.match(regex)) {
            setHasSpecialCharacter(true);
            setPasswordIsValid(true);
           } else {
            setHasSpecialCharacter(false);
            setPasswordIsValid(false);
           }
     }

       return (
        <input type='password' placeholder='Enter password' 
            onChange={passwordValidator} />
        )}
```

## STEP 6
**The `passwordIsValid` state can be used to render an error to the user**

_Let me know what you think about this method in the comments section below!_