DEV Community

Cover image for CREATING PASSWORD VALIDATION/CHECKLIST IN REACT.JS
Candie
Candie

Posted on

2 1

CREATING PASSWORD VALIDATION/CHECKLIST IN REACT.JS

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

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

STEP 3

Create an input component for the password

   export default function PasswordComponent(){

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

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

STEP 4

use useState hook to manage input and validity state state

  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} />
        )}
Enter fullscreen mode Exit fullscreen mode

STEP 5

Start matching the entered value with the regular expression

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} />
        )}
Enter fullscreen mode Exit fullscreen mode

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!

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

đź‘‹ Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay