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 = /[-._!"`'#%&,:;<>=@{}~\$\(\)\*\+\/\\\?\[\]\^\|]+/;
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} />
)}
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} />
)}
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} />
)}
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!
Top comments (0)